Jquery单击绑定第二次不起作用

Question

我a和img里面的标签有一个奇怪的行为.

我有一个带有表的php页面,这是一个记录列表.在每一行的末尾,我都有一个删除行的按钮.

这是我的表的代码:

<div class='edit' >
    <a id='20' href='#' return;>
        <img src='images/edit.png'  />
    </a>
</div>

每个记录,主表的每一行都有上面的代码,彼此具有不同的id.

我的脚本代码是:

$("#delete a").click(function(e) {

e.preventDefault();

$('#action').val("delete");
$('#keyAction').val(this.id);

$.ajax({
        type: "POST",
        url: "processAttivita.php",
        data: $("#attivita_form").serialize(),
        error: function(msg) {
            $("#errore").html(msg);
        },
        success: function(msg) {
            // display the errors returned by server side validation (if any)
            ricaricaLista();                

        }
    });     

 // end click delete event  
 });

我试图删除第一行点击图像工作正常.在第二个似乎jquery不绑定"click"事件并且a元素的默认href 发生,由于href属性中的"#"而保留在同一页面上.

任何想法为什么第二次jquery不拦截点击<a>元素？

Answer 1

您正在使用ID选择器#delete a,它只匹配一个(通常是第一个)元素.

尝试使用一个类,例如.delete a.

你只获得一个元素的原因是因为JQuery优化了以#pass through 开头的任何选择器,document.getElementById它只返回1个元素.

这是一个如何使用事件委托来实现同样的事情的例子:

$("#tableid").click(".delete a", function(e) {
    // your code
});

你的html需要在你的桌子上有一个ID class="delete",并将容器中的删除链接提供给你.