附加元素单击功能无法按预期工作？

Question

我通过$('body').on('click')将click事件附加到附加元素$('body').on('click') 。 但是，如果我单击id两次，它的附加元素单击时也会发出两次警报。

如果我这样附加$('body').off().on("click") ，则最后一个附加元素的单击只能$('body').off().on("click")警报（如果我先单击id一个，然后单击id两个，则再附加一个id，单击无法提醒） 。

如何为每个附加元素附加click事件以发出警报？

 $(document).ready(function(){ test.init(); }) var test = { init : function() { $("#one").on("click",function(){ test.appendOne(); }); $("#two").on("click",function(){ test.appendTwo(); }); }, appendOne: function() { $("<button class='one-after'>").append("<h1>One</h1>").appendTo("body"); $('body').on("click",'.one-after',function() { alert("clickedOne"); }); }, appendTwo: function() { $("<button class='two-after'>").append("<h1>Two</h1>").appendTo("body"); $('body').on("click",'.two-after',function() { alert("clickedTwo"); }); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="one">One</button> <button id="two">Two</button> 

Answer 1

您应该使用选择器children（），它是body元素的每个第一级子代的选择器（请参阅https://api.jquery.com/children/上的文档参考）

因此您的代码将变为：

$('body').children().on("click")

Answer 2

稍作修改，将事件直接添加到附加对象中，如下所示：

  $("<button class='one-after'>").append("<h1>One</h1>").appendTo("body")    
        .on("click",function() {
          alert("clickedOne"); })

您可以为另一个模式重复此模式

Answer 3

发生这种情况是因为每次您单击按钮时，都会在body上绑定一个新事件。

您已经在使用事件委托，您只需绑定一次事件，每个新元素都将有一个“附加”的事件。 将事件绑定init ：

 $(document).ready(function(){ test.init(); }) var test = { init : function() { $('body').on("click",'.one-after',function() { alert("clickedOne"); }).on("click",'.two-after',function() { alert("clickedTwo"); }); $("#one").on("click",function(){ test.appendOne(); }); $("#two").on("click",function(){ test.appendTwo(); }); }, appendOne: function() { $("<button class='one-after'>").append("<h1>One</h1>").appendTo("body"); }, appendTwo: function() { $("<button class='two-after'>").append("<h1>Two</h1>").appendTo("body"); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="one">One</button> <button id="two">Two</button> 

Answer 4

您可以简单地更改这两行：

$("<button class='one-after'>").append("<h1>One</h1>").appendTo("body");    
$('body').on("click",'.one-after',function() {

到（链接到appendTo并打开。删除事件委托）：

$("<button class='one-after'>").append("<h1>One</h1>").appendTo("body").on("click",function() {

无需在主体上创建委派click事件处理程序，您只需将click事件添加到每个元素即可。

 $(document).ready(function(){ test.init(); }) var test = { init : function() { $("#one").on("click",function(){ test.appendOne(); }); $("#two").on("click",function(){ test.appendTwo(); }); }, appendOne: function() { $("<button class='one-after'>").append("<h1>One</h1>").appendTo("body").on("click",function() { alert("clickedOne"); }); }, appendTwo: function() { $("<button class='two-after'>").append("<h1>Two</h1>").appendTo("body").on("click",function() { alert("clickedTwo"); }); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="one">One</button> <button id="two">Two</button> 

Answer 5

您可以使用jQuery的.one（）变体：

$("#one").one("click",function(){
  test.appendOne();
});

这只会触发一次。 http://api.jquery.com/one/