动态添加的JavaScript不起作用,但静态代码工作正常？

Question

这是我正在做的...我有一个用户输入内容的文本框,然后单击添加图标.这会触发一些jquery代码,将他们键入的项添加到"content"div中的span中.生成的代码在悬停时显示删除图标,单击时应使跨度消失.如果代码已经在页面上(在文档加载之前),但是如果它是动态创建的,则它会破坏点击功能的删除.

这是一个JSfiddle所以你可以看到它在行动:http://jsfiddle.net/WF32y/

我该怎么做才能解决这个问题？当你为新问题输入标签时,我基本上想要做这里发生的事情(stackoverflow.com).

Answer 1

通过更改以下内容,使用事件委派来动态添加元素

$('a.delete').on('click', function(e) {

进入:

$(document).on('click', 'a.delete', function(e) {

小提琴

.on() 直接和委派事件参考

此外,关于性能,您可以将处理程序附加到动态添加元素的更近的祖先document(例如静态包装元素).