附加元素單擊功能無法按預期工作？

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/