js可以触发click事件但是点击就不行（只是火狐浏览器，帮帮忙呀）

发布于
2017-11-09

新手上路，请多包涵

1、这是出问题的时候

2、这是元素的结构

3、这是js代码：

// 动态添加标签的代码
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();
    });
}

javascript html

阅读 5.9k

4 个回答

得票最新

skyForeverdan

1213

发布于
2017-11-10

可能是因为i标签是动态添加的，所以没有绑定到事件，可以试试这样写

$('.tab-bar-tabs .tab').on('click', '.tab-close', function() {
    //......
});

linong

29.2k1368137

发布于
2017-11-10

我不知道你为啥写这么复杂，好多都是不需要处理的点。我看了看你的逻辑，我猜想是不是因为样式异常，导致点击不到节点？

Mr_zhang

39529

发布于
2017-11-10

更新于
2017-11-10

哥们，我和一楼看法差不多，给你个例子你试试就知道了，还有现在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>

shoxvc2000

2783856

发布于
2017-11-13

浏览器单步调试

撰写回答