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

我有一个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和方法。 它们看起来很相似，但bindfunction较少：它不支持事件委托。 第二个参数不是委托事件的选择器，而是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()作用，但它使用第二个参数作为触发事件的元素的filter。 我不认为.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'); });