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); 
     }); 
    }); 
});