javascript - 如何在 twitter-bootstrap 对话框中停止不需要的重复变量？

Question

我有多个链接要通过 ajax 删除:

<a id="id-1">link1</a>
<a id="id-2">link2</a>
<a id="id-3">link2</a>
<a id="id-4">link2</a>
...

这是我的代码的简化版:

$(document).on("click", "[id^=id-]",function(event) { 
        event.preventDefault();
        var btnid = this.id;
        alert('1:'+btnid );

        // a dialog confirm to aks delete  in bootstrap
        $("#confirmbtn").on( "click", function(event) {
            alert('2:'+btnid );
        });
})

当我刷新第一个页面时，我得到了警告:(点击<a id="id-1">link1</a>)

1:id-1
2:id-2

但是第二个，第三个……我错了!

例如第二个:(点击<a id="id-1">link2</a>)

1:id-2
2:id-1
2:id-2

第三个:(点击<a id="id-1">link3</a>)

1:id-3
2:id-1
2:id-2
2:id-3

我希望

1:id-3
2:id-3

可以帮我解决吗？

Answer 1

当您在另一个事件处理程序中绑定(bind)事件处理程序时，每次单击元素都会附加一个新的事件处理程序，因此您遇到了问题。您可以使用 .data()持久化任意数据。

$(document).on("click", "[id^=id-]",function(event) { 
    event.preventDefault();
    var btnid = this.id;
    alert('1:'+btnid );

    $("#confirmbtn").data('id', this.id)
})

// a dialog confirm to aks delete  in bootstrap
$(document).on( "click", "#confirmbtn", function(event) {
    alert('2:'+$(this).data('id'));
});