追加后点击事件不起作用，为什么？

我有一个问题，我的jQuery代码。当我做一个追加，事件点击只是在第一个img上工作，而不是新的（appened）。追加后点击事件不起作用，为什么？

我的代码page.htm：

<img src="images/del.png" style="cursor:pointer;" title="Delete" class="delegate-del"/> 
<img src="images/add.png" style="cursor:pointer;" title="Add" class="delegate-add" />

我的代码的jQuery：

// When we click on "add.png", the script add the image del.png 
$('.delegate-add').click(function(){ 

     $('#tableautest').append('<img src="images/del.png" style="cursor:pointer;" title="Delete" class="delegate-del" />'); 

}); 




/* The alert just work on the first balise <img src="images/del.png"... 
I don't understand why that's don't work with the new img appended... An idea ?? 
*/ 
    $('.delegate-del').click(function(){ 
      alert("ok"); 

    });

非常感谢你！

来源

2013-06-28 Geoffrey

由于图像动态添加，你需要使用event delegation注册事件处理程序

// New way (jQuery 1.7+) - .on(events, selector, handler) 
$('#tableautest').on('click', '.delegate-del', function(event) { 
    event.preventDefault(); 
    alert('testlink'); 
});

这将#tableautest元素，降低其范围内的事件附加到任何图像检查整个document元素树并提高效率。

FIDDLE DEMO

来源

2013-06-28 08:53:27

不错！这很好！非常感谢你！ – Geoffrey

这是因为您将click事件绑定到当前具有该类的所有现有元素。之后当您添加具有相同类的元素时，该事件尚未绑定到该元素。

因此，您可以使用.on（）方法，该方法将始终将click事件绑定到具有该类的元素。

$(document).on("click", '.delegate-add', function() { ... });

来源

2013-06-28 08:52:00 Alex

不错！这也很好！非常感谢你！ :) – Geoffrey

爱你的昵称btw：D – Alex

。点击（）将附加事件已经存在的元素。当您使用JavaScript动态创建元素时，它不起作用。

使用。对（）函数来代替：

$('#tableautest').on('click', '.delegate-del', function(e) { 
    e.preventDefault(); 
    alert('ok'); 
});

见http://api.jquery.com/on/

来源

2013-06-28 09:05:16 Amani

追加后点击事件不起作用，为什么？

回答

相关问题