附加元素點擊功能未按預期工作？

我通過$('body').on('click')附加點擊事件添加元素。但是，如果我點擊ID一個兩次，當它的附加元素點擊時它也會提醒兩次。附加元素點擊功能未按預期工作？

如果我附上這樣$('body').off().on("click")，最後的附加元素點擊可以提醒只有（如果我點擊一個ID，然後再單擊ID二，然後ID一個附加元素點擊可不會提醒）。

如何爲每個附加元素添加單擊事件以提醒一次？

$(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>

來源

2017-09-21 David JorHpan

您應該使用選擇兒童（），這是對身體元素的每個第一級子選擇器（見https://api.jquery.com/children/文檔參考）

所以，你的代碼將成爲：

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

來源

2017-09-21 14:28:09

稍作修改，將事件直接添加到附加對象爲b elow：

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

您可以重複這一模式的另一個

來源

2017-09-21 14:30:17 jidexl21

，因爲你按一下按鈕，每次這種情況發生，您綁定的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>

來源

2017-09-21 14:30:59

小心解釋downvote？我可能會錯誤地解釋一些事情。 –

您可以簡單地改變這兩條線：（鏈appendTo與刪除事件代表團）

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

到：

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

I除了在主體上創建委託單擊事件處理程序外，您還可以簡單地將點擊事件添加到每個元素。

$(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>

來源

2017-09-21 14:35:32 gaetanoM

您可以使用jQuery的。一（）的變體：

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

這將觸發一次。 http://api.jquery.com/one/

來源

2017-09-21 14:37:02

附加元素點擊功能未按預期工作？

回答

相關問題