Question

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

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

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

Answer 1

通过更改此内容，使用event delegation动态添加元素：

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

进入这个：

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

Fiddle

.on() Direct and delegated events reference

此外，关于性能，您可以将处理程序附加到动态添加的元素的更近的祖先，而不是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();
        });
    });
});

顺便说一句FYI：

// 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'...

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

2 个答案: