[英]jQuery on('click', …) not working on appended element
我有一個div,我附加以下代碼:
function generateBall(){
var colors = ["fe0ba5", "00c0ff", "21f1a5", "f13e21", "e819fb", "3ae319", "ff9900", "512e5e", "284184"];
var width = $('.reaction_area').width() - 40;
var height = $('.reaction_area').height() - 40;
var a = Math.floor(Math.random()*(width - 40 + 1) + 40);
var b = Math.floor(Math.random()*(height - 40 + 1) + 40);
var size = Math.floor(Math.random()*(32 - 24 + 1) + 24);
var color = colors[Math.floor(Math.random() * colors.length)];
$('.reaction_area').append('<div class="ball_2" style="left: '+a+'px; top: '+b+'px; height: '+size+'px; width: '+size+'px; background: #'+color+'" data-id="'+wave+'"></div>');
}
然后我有這個:
$('.ball_2').on('click', function(){
$(this).remove();
wave--;
});
它不起作用。 我有其他元素,我追加並點擊它們工作,為什么這不?
我也嘗試過$('document').on('click', '.ball_2', function(){ //code });
它也沒用。
那將是$(document)
(沒有引號)。
$('.ball_2').on('click', ...)
不起作用,因為在執行時元素.ball_2
尚不存在。 但是, $(document).on('click', '.ball_2', ...)
工作原理是因為它將處理程序放在祖先元素上並利用了一種稱為“事件冒泡”的現象。 簡單來說,單擊后代時會認為祖先被點擊了。
由於具有類ball_2
元素是動態生成的。
$(document).on('click','.ball_2', function(){
$(this).remove();
wave--;
});
在generateBall()函數中添加以下行。 因為div是動態創建的,所以我們應該在創建函數時綁定它。 這句話可以讓每個'.ball_2'都有自己的刪除功能,假設可能有多個'.ball_2'。
$('.ball_2:last').on('click', function(){$(this).remove());});
使用委托 :
$('.reaction_area').delegate('.ball_2', 'click', function (event) {
$(this).remove();
wave--;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.