jquery - JQuery中动态元素的绑定点击事件

Question

我有一个通过 .html 属性调用 AJAX 调用后动态填充的 div

$("#gallery").html(imagesHtml);

insdie imagesHtml 我有 2 个名为“prebtn”和“nxtbtn”的按钮，现在我尝试在 JQuery 中使用以下语法绑定这些按钮：

$("#gallery").bind('click', '#nxtbtn', function() {
    alert('next');
});

和

$("#gallery").bind('click', '#prebtn', function() {
    alert('previous');
});

但是当我单击其中一个按钮时，两个事件都会被触发，并显示“下一个”和“上一个”的警报；但是我只点击了其中一个按钮！

如果您需要更多说明，请告诉我。

谢谢

score 3 · Accepted Answer

你混淆了bindandon方法。它们看起来相似，但bind功能较少：它不支持事件委托。第二个参数不是委托事件的选择器，而是一个data参数。

这将起作用：

$("#gallery").on('click', '#nxtbtn', function() {

score 0 · Accepted Answer

我认为您打算.on()改用：

$("#gallery").on('click', '#nxtbtn', function() {
    alert('next');
});
$("#gallery").on('click', '#prebtn', function() {
    alert('previous');
});

该bind()函数将绑定到初始选择器中的元素，在本例中为#gallery. 因此，您将两个函数都绑定到该事件。从技术上讲，这也是这样.on()做的，但它使用第二个参数作为触发事件的元素的过滤器。我不这么认为.bind()，我认为第二个参数只是你的事件处理函数忽略的数据。

score -1 · Accepted Answer

您应该使用on而不是使用bind让它在动态创建的元素上工作。而e.preventDefault()将阻止相应事件的默认操作触发。

$("#gallery").on('click', '#nxtbtn', function(e) {
    e.preventDefault();
    alert('next');
});

和

$("#gallery").on('click', '#prebtn', function(e) {
    e.preventDefault();
    alert('previous');
});

3 回答 3