1

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

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

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

4

2 回答 2

5

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

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

进入这个：

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

小提琴

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

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

于 2012-10-11T22:07:23.380 回答
1

您可以使用委托轻松完成此操作。在你的情况下：

  $('#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'...
于 2012-10-11T22:10:26.670 回答