使用clone属性创建动态页面时close事件多次触发问题求助

嘿，我一眼就看出问题所在啦！你每次点击「添加」按钮时，都会给页面上所有的.close元素重新绑定一次点击事件。这样一来，当你创建了4个元素后，第一个关闭按钮上已经绑定了4次点击事件，点击它就会执行4次id--，自然就重复了。

问题根源 #

你的代码里，$('.close').click(function() {...})是嵌套在.add-contact的点击事件回调里的。每添加一个新元素，这段代码就会跑一遍，给所有已存在的关闭按钮再绑一次事件，导致事件叠加触发。

解决方案：用事件委托代替重复绑定 #

我们可以把点击事件绑定到父元素上（比如.nav-tabs），利用事件冒泡的特性来处理所有关闭按钮的点击。这样不管什么时候创建的关闭按钮，都只会触发一次事件处理函数，而且不用每次添加元素都重新绑定。

修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
    <style>
        .close { 
            color: red; 
            opacity: 0.8; 
            position: absolute; 
            right: 5%; 
            top: 25%; 
        } 
        .nav-tabs>li>a { 
            width: 175px; 
            text-align: center; 
        } 
        .add-contact { 
            width: 50px !important; 
        }
    </style>
</head>
<body>
<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#assuredconx">Mr.X</a></li> 
    <li><a data-toggle="tab" href="#assuredconb">Mr.Boy</a></li> 
    <li><a data-toggle="tab" class="add-contact" style="cursor:pointer"><i class="fas fa-plus"></i></a></li> 
</ul> 
<div class="tab-content"> 
    <div id="assuredconx" class="container-fluid tab-pane fade in active">#1</div> 
    <div id="assuredconb" class="container-fluid tab-pane fade">#2</div> 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() { 
    var id = 1; 
    var assured = document.getElementById('assuredconb'); 

    $('.add-contact').click(function(e) { 
        e.preventDefault(); 
        if (id < 5) { 
            // 创建新的tab项
            $(this).closest('li').before(`
                <li>
                    <a data-toggle="tab" href="#assured${id}">New assured ${id}</a>
                    <span class="fas fa-times-circle close" id="close${id}"></span>
                </li>
            `); 
            // 克隆并添加内容面板
            var clone = assured.cloneNode(true); 
            clone.id = "assured" + id; 
            $('.tab-content').append(clone); 
            id++; 
        } 
    }); 

    // 用事件委托绑定关闭事件，只绑定一次！
    $('.nav-tabs').on('click', '.close', function() { 
        id--; 
        var anchor = $(this).siblings('a'); 
        $(anchor.attr('href')).remove(); 
        $(this).parent().remove(); 
        $(".nav-tabs li").children('a').first().click(); 
        alert(id); 
    }); 
}); 
</script>
</body>
</html>

修改关键点 #

1. 把关闭按钮的点击事件绑定从.add-contact的回调里移出来，改成用$(父元素).on('click', '.close', function(){...})的事件委托方式，只需要绑定一次，就能处理所有现有和未来创建的关闭按钮。
2. 用模板字符串（`...`）拼接HTML，可读性更强（你也可以继续用原有的字符串拼接方式，不影响功能）。

这样修改后，不管你创建多少个元素，点击关闭按钮时id--只会执行一次，完美解决重复触发的问题！

内容的提问来源于stack exchange，提问作者Nikhil Eshvar