JQuery单击类事件会触发多次单击

我有许多带有’more-info’类的图像项，它们应该响应click事件并将ajax内容加载到div，但是这是第一次找到的，但是当我第二次点击任何其他图像时，它会触发2次点击，第三次触发3次点击，依此类推。

这是html：

和ajax handdler：

  $(function () { $('.more-info').click(function(event) { event.preventDefault() url = $(this).attr('path'); $('#test').load(url, function(){ alert('loaded: '+ url) }) }) }); 

Answer 1

我想你正在再次加载整个html页面，包括javascript。 因此，对于每次单击，您将添加另一个事件处理程序。

因此，您只能加载页面的特定部分，而不是加载整个页面：

 $('#test').load(url + ' #somediv', function(){ 

请参阅文档中的jQuery加载示例 。

或者您应该确保请求的结果仅包含您需要的部分。

最后一个可能的解决方案是在加载内容之前.unbind()事件：

 $(function () { $('.more-info').click(function(event) { event.preventDefault(); // for caching the element, because it will be referenced twice var $elem = $(this); url = $elem.attr('path'); $elem.unbind('click'); $('#test').load(url, function() { // used console.log which is cleaner imho console.log('loaded: '+ url); }); }); });