Jquery在点击类时附加按钮答案

【问题标题】：Jquery appended buttons on click with classesJquery在点击类时附加按钮
【发布时间】：2017-04-27 09:09:18
【问题描述】：

我有一个问题，我多次注意到但仍然不明白真正的原因。

我有一个脚本，通过单击按钮 #add 来附加一些 .btn 按钮。

当然要单击.btn 按钮。所以我在append()之后做了一个事件：

$(".btn").on('click', function(){

    alert('clicked');

});

此功能按我的意愿工作。当我创建一个按钮并单击它时，它会提醒我。但是当我创建多个按钮并单击其中一个按钮时，问题就来了。它会为我单击的按钮以及源代码中的每个按钮以及其后的类弹出一个警报。（举个例子，如果我创建了 3 个按钮，如果我点击第一个会提示 3 次。如果我点击第二个会提示两次，如果我点击最后一个会提示一次。）

我认为它一定是关于一些我还没有很好理解的 Javascript 概念。可能是班级的问题？我有点失落。

如果你想自己看，这里有一个例子：https://jsfiddle.net/nmza0ae4/

提前谢谢你！

【问题讨论】：

标签： javascript jquery html class button

【解决方案1】：

试试这个：当您将点击处理程序添加到按钮用户$(".btn").on('click'.. 时，它将仅添加到该时间点的可用按钮。要将点击处理程序添加到动态添加的按钮，请使用以下代码

$(document).on('click',".btn", function(){
    alert('clicked');
});

【讨论】：

哦，我明白了。所以我必须使用$(document).on() 来动态添加元素，而不是像我在$(.class).on() 那样通过它们的类来选择它们
如果我理解正确的话，$(document) 会在点击之前遍历整个代码，所以不会遗漏任何元素，对吧？
是的。在这里，您可以使用父元素而不是文档来获得更快的响应，例如如果 .parentButton 是一个将所有按钮包装在其中的 div 类，那么您可以使用 $(',parentButton').on('click',...

【解决方案2】：

$('#add').click(function(){
    $('html').append('<button class="btn">Test</button>');
    $(".btn").on('click', function(){

    alert('clicked');

    });
  });

您正在做的是在每次点击时添加事件处理程序。添加新按钮时，新的事件处理程序会附加到按钮上，因此会有多个警报。将事件处理程序放在范围之外

$('#add').click(function(){
  $('html').append('<button class="btn">Test</button>');  
});
$(document).on('click',".btn", function(){
 alert('clicked');
});

【讨论】：

【解决方案3】：

你可以使用$(document).on('click'函数...

$(document).ready(function(){

	$('#add').click(function(){
  	$('html').append('<button class="btn">Test</button>');  	
  });
});


    $(document).on('click',".btn", function(){

  	alert('clicked');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">
Add
</button>

【讨论】：

【解决方案4】：

当 Add 按钮添加到 dom 时，您将需要 event delegation。添加按钮标签的代码看起来不错。

$(document).ready(function(){

    $('#add').click(function(){
    $('html').append('<button class="btn">Test</button>');

  });
});

$(document).on("click",'.btn', function(){
alert('clicked');
});

【讨论】：

【解决方案5】：

您可以像这样在绑定事件之前取消绑定事件。

$('#add').click(function(){
    $('html').append('<button class="btn">Test</button>');
    $(".btn").off("click");
    $(".btn").on("click",function(){
        alert('clicked');
    })
});

或者您可以为所有动态添加的按钮全局编写点击事件，例如

$('#add').click(function(){
    $('html').append('<button class="btn">Test</button>');
  });
$(document).on('click',".btn",function(){
   alert('clicked');
});

但标准方式是第二种方式。 https://jsfiddle.net/Rishi0405/nmza0ae4/2/

【讨论】：

【解决方案6】：

试试这个：

$(document).ready(function(){

 $('#add').click(function(){
   $('html').append('<button class="btn">Test</button>');
 });
 $(document).on('click',".btn", function(){
   alert('clicked');
 });
});

【讨论】：