在JQuery中为动态元素绑定click事件

Question

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

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

insdie imagesHtml i ahve 2个按钮叫做“prebtn”和“nxtbtn”现在我正在尝试用JQuery中的以下语法绑定这些按钮：

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

和

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

但是，当我点击其中一个按钮时，两个事件都被触发，它显示“下一个”和“上一个”的等位词;然而，我只点击了其中一个按钮！

如果您需要更多说明，请与我们联系。

由于

Answer 1

您对bind和on方法感到困惑。它们看起来很相似，但bind功能较少：它不支持事件委派。第二个参数不是委托事件的选择器，而是data参数。

这将有效：

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

Answer 2

我认为您打算使用.on()代替：

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

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

Answer 3

您应该使用 on 而不是使用 bind 来使其适用于动态创建的元素。 而 e.preventDefault（）会阻止相应事件的默认操作触发。

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

和

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