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

Question

我有一些类'more-info'图像项目应该响应点击事件并将ajax内容加载到div，但是这个作品第一次找到，但是当我第二次点击任何其他图像，第三次触发2次点击，触发3次点击等等。

下面是HTML：

<div id="test" style="display:none"></div> 

<div class="image-item"> 
    <img class="more-info" src="/site/uploads/documents/_thumb01.jpg" path="/site/auto/1" /> 
</div> 
<div class="image-item"> 
    <img class="more-info" src="/site/uploads/documents/_thumb02.jpg" path="/site/auto/2" /> 
</div> 
<div class="image-item"> 
    <img class="more-info" src="/site/uploads/documents/_thumb03.jpg" path="/site/auto/4" /> 
</div> 

和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's load example。

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

最后一个可能的解决办法是.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); 
     }); 
    }); 
});