鍍金池/ 問答/Java  HTML/ js可以觸發(fā)click事件但是點(diǎn)擊就不行(只是火狐瀏覽器,幫幫忙呀)

js可以觸發(fā)click事件但是點(diǎn)擊就不行(只是火狐瀏覽器,幫幫忙呀)

1、這是出問題的時(shí)候

2、這是元素的結(jié)構(gòu)

3、這是js代碼:

// 動(dòng)態(tài)添加標(biāo)簽的代碼
function addTab(url, name, id, closeable) {
    if (hasTab(id)) {
        return $('.tab-bar-tabs .tab[data-id="' + id + '"]').trigger('click');
    }

    var tabs = document.getElementById('tab-bar-tabs');
    var btn = document.createElement('button');
    btn.className += " tab btn-zbss";
    btn.setAttribute('data-id', id);

    var span = document.createElement('span');
    span.innerText = name;
    btn.appendChild(span);

    if (closeable) {
        var i = document.createElement('i');
        i.className += " fa fa-times-circle tab-close";
        btn.appendChild(i);
    }

    tabs.appendChild(btn);

    var tabMain = document.getElementById('tab-main');
    var iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.id = id;
    iframe.style.display = "none";

    tabMain.appendChild(iframe);

    initTabEvent();
    $('.tab-bar-tabs .tab[data-id="' + id + '"]').trigger('click');
}

// 綁定事件的代碼
function initTabEvent() {
    $('.tab-bar-tabs .tab').unbind().click(function(e) {
        $('.tab-bar-tabs .tab').each(function() {
            $(this).removeClass('active');
        });
        $(this).addClass('active');
        var id = $(this).attr('data-id');
        $('.navigation li a').each(function() {
            var len = $(this).parent('li').children('ul').length;
            if (len < 1) {
                var newId = $(this).attr('data-id');
                if (newId == id) {
                    $(this).addClass('li-without-ul-a-active');
                } else {
                    $(this).removeClass('li-without-ul-a-active');
                }
            }
        });
        $('.tab-main iframe').each(function() {
            var iframeId = $(this).attr('id');
            if (iframeId == id) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
    $('.tab-close').unbind().click(function (e) {
        var evt = e || window.event;
        if (evt.preventDefault) {
            evt.preventDefault();
            evt.stopPropagation();
        } else {
            evt.returnValue = false;
            evt.cancelBubble = true;
        }
        var parent = $(this).parent('button');
        if (parent.hasClass('active')) {
            var prev = parent.prev();
            if (prev != null && prev.length > 0) {
                prev.trigger('click');
            } else {
                var next = parent.next();
                if (next != null && next.length > 0) {
                    next.trigger('click');
                }
            }
        }
        var id = parent.attr('data-id');
        $('.tab-main>iframe[id="' + id + '"]').remove();
        parent.remove();
    });
}
回答
編輯回答
情殺

可能是因?yàn)閕標(biāo)簽是動(dòng)態(tài)添加的,所以沒有綁定到事件,可以試試這樣寫

$('.tab-bar-tabs .tab').on('click', '.tab-close', function() {
    //......
});
2018年1月31日 17:09
編輯回答
荒城

哥們,我和一樓看法差不多,給你個(gè)例子你試試就知道了,還有現(xiàn)在jq綁定事件推薦用on,別直接.click,有很多問題的:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <ul id="list">
    <li class="li">
      <div class="txt">文字1</div>
    </li>
    <li class="li">
      <div class="txt">文字2</div>
    </li>
    <li class="li">
      <div class="txt">文字3</div>
    </li>
  </ul>
  <button onclick="add()">添加</button>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(function () {
    var ul = $("#list")
    var lis = $(".li")
    var txts = $(".txt")
    function add() {
      console.log("add");
      ul.append(`<li class="li">
      <div class="txt">新添加的li</div>
    </li>`)
    }
    // $("#list").find(".txt").on('click', function(){
    //   $(this).css("background-color", "lightgreen")
    // })  
    // 失敗

    // $("#list .txt").unbind().click(function(){
    //   $(this).css("background-color", "lightgreen")
    // })
    // 失敗
    
    // $("#list").unbind().on( 'click', ".txt",function(){
    //   $(this).css("background-color", "lightgreen")
    // })
    // 成功

    // $("#list").on('click', ".txt",function(){
    //   $(this).css("background-color", "lightgreen")
    // })  
    // 成功
    window.add = add
  })
</script>

</html>
2017年3月17日 05:56
編輯回答
陌璃

我不知道你為啥寫這么復(fù)雜,好多都是不需要處理的點(diǎn)。我看了看你的邏輯,我猜想是不是因?yàn)闃邮疆惓#瑢?dǎo)致點(diǎn)擊不到節(jié)點(diǎn)?

2017年3月12日 23:09
編輯回答
女流氓

瀏覽器單步調(diào)試

2017年10月3日 20:51