使用jQuery将事件绑定到动态创建的元素的问题

时间:2012-03-07 21:11:28

标签: jquery hyperlink bind jquery-click-event

$.each(data, function(i,data) {
...[cut]...
    +"<a id=\"contact_"+data.id+"_delete\" href=\"/user/contact/delete/ticket_id/"+data.ticket_id+"/contact_id/"+data.id+"\">Delete</a>"
...[cut]...
    $("#contact_"+data.id+"_delete").live('click',function() {
        var href = this.attr('href');
        alert(href);
        return false;
    });

我有以下代码示例(为简单起见,不相关的部分已删除)。我所拥有的是一个重绘表格的行(tr)的函数。每行在行的末尾都有一个“删除”链接,用于调用url / user / contact / delete / ticket_id / {$ ticket_id}

然后(在同一个循环中),我想将click事件绑定到新创建的链接。但是,当我点击链接时,浏览器会离开页面并转到网址,而不是转到点击的链接功能。

首先,我是否正确绑定了点击事件?

其次,我是否正确检索元素的'href'属性?

2 个答案:

答案 0 :(得分:3)

除了@charlietfl所说的内容之外,您还可以为所有删除元素设置一个处理程序。只需将相同的类添加到所有类,例如class="contact_delete",然后使用.on()定位所有类:

+'<a class="contact_delete" id="contact_'+data.id+'_delete" ...

请注意,如果您使用单引号,则不必转义所有双引号。

$('body').on('click', '.contact_delete', function() {
    var href = $(this).attr('href');
    alert(href);
    return false;
});

答案 1 :(得分:2)

你需要在$()中包含“this”以使其成为jQuery对象才能使用jQuery方法

 var href = $(this).attr('href');

live()已弃用(但在1.7.1中工作)所以你应该考虑使用更多当前的on()方法