Question

我正在动态创建一些标签。然后我尝试用它们附加click事件。但那些事件并没有解决。

这是我的代码：

$(function() {
    onUploadReady();
});

var onUploadReady = function() {
    $('a[name=add]').on('click', function(event){
        event.stopPropagation();
        $('table#multiUpload').append('<tr><td style=\"text-align: center;\"><input type=\"file\" name=\"file\"/></td><td><a href="#" name="remove">Remove</a></td></tr>');
        return false;
    });

    $('a[name=remove]').on('click', function(event){
       event.stopPropagation();
       $(this).parents('tr').eq(0).remove(); 
       return false;
    });
}

如果我执行$('a[name=remove]').live('click', function(event)而不是$('a[name=remove]').on('click', function(event)，那么事件就会被触发。我在某处读过不鼓励使用live，我们应该使用on。如果我们使用live，也可能发生事件传播或冒泡。那么我该如何解决这个问题呢？

jsFiddle

Answer 1

这样做：

$("parent_selector").on('click', 'a[name=remove]', function(e){
   //do something
})

如果不知道parent_selector，请改用document。

在您的示例中，您可以写：

$("table#multiUpload").on('click', 'a[name=remove]', function(e){
   //do something
})

您使用的语法与bind类似。对于动态添加的元素，您应该使用上面的语法。在此，我们将处理程序附加到已存在的父级，而不是新添加的元素。因此它适用于将来添加的所有元素。

Answer 2

使用：

$(document).on('click', 'a[name=remove]', function(e){
...
});

附加动态创建标记的click事件未触发

2 个答案: