动态添加的javascript无法正常工作，但是静态代码可以正常工作吗？

Question

这是我正在做的...我有一个文本框，用户可以在其中输入内容，然后单击添加图标。 这会触发一些jquery代码，将他们键入的项目添加到“内容” div中的跨度中。 生成的代码具有一个删除图标，该图标显示在悬停时，单击该图标应可使跨度消失。 如果代码已经在页面上（在加载文档之前），但是该代码是动态创建的，则它将破坏单击删除功能，这将起作用。

这是一个JSfiddle，因此您可以在实际中看到它： http : //jsfiddle.net/WF32y/

我该怎么做才能解决此问题？ 当您输入新问题的标签时，我基本上想做在这里（stackoverflow.com）上发生的事情。

Answer 1

通过更改以下内容，将事件委托用于动态添加的元素：

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

变成这个：

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

小提琴

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

另外，关于性能，您可以将处理程序附加到动态添加的元素（而不是document （例如静态包装元素）的更近祖先。

Answer 2

您可以使用委托轻松地做到这一点。 在您的情况下：

  $('#container').delegate('a.delete','click', function(e) {
    e.preventDefault();
    taskID = $(this).closest('.task')[0].id;
    $(this).closest('.task').fadeTo(300, 0, function() {
        $(this).animate({
            width: 0
        }, 200, function() {
            $(this).remove();
        });
    });
});

顺便说一句：

// jQuery version 1.4.3+
$('#container').delegate('a.delete'...

// jQuery 1.7+
$('#container').on('click', 'a.delete', function(e) { 

它比以下方法更快，更合适：

$(document).on('a.delete'...

要么：

$('body').delegate('a.delete'...

要么：

$(document).delegate('a.delete'...