阿賈克斯 - 防止點擊一個成功的阿賈克斯請求

Question

我有一個視頻縮略圖在我的網頁上，有一個小圖標「大拇指朝下」。當你點擊那個時，另一個縮略圖顯示，替換另一個。用戶可以儘可能多地做到這一點。

我的代碼現在只在第一次運行。 HTML：

<a href="/change/videos/{{ video.video_id}}/thumbsdown/" data-sort="sort" data-page="page" class="dislike_black" title="I dislike this"></a> 

AJAX：

$('.dislike_black').click(function(e) { 
    e.preventDefault(); 
    alert("test"); 
    var $aTag = $(this); 
    $.ajax({ 
     url: $aTag.attr('href'), 
     type: "POST", 
     data: { 
      "sort": $aTag.data('sort'), 
      "page": $aTag.data('page') 
     }, 
     success: function(response) { 
      $aTag.parents("li").replaceWith(response); 
     } 
    }); 
}); 

當我點擊該圖標在第一時間，所有的罰款，觸發警報，第二次思想，沒有警告，瀏覽器加載在href鏈接。

我試過.preventDefault（）;在成功和完整的事件上，但它不工作。

如何做到這一點的任何提示？

Answer 1

你的內容是動態創建的，因此，根據jQuery的版本你使用，你需要的jQuery.live()或jQuery.on()方法

jQuery.live() since jQuery 1.3 an event handler for all elements which match the current selector, now and in the future.

jQuery.on() since jQuery 1.7 - Attach an event handler function for one or more events to the selected elements.

樣品

jQuery.live（）

$('.dislike_black').live("click", function(e) { 
    e.preventDefault(); 
    alert("test"); 
    var $aTag = $(this); 
    $.ajax({ 
     url: $aTag.attr('href'), 
     type: "POST", 
     data: { 
      "sort": $aTag.data('sort'), 
      "page": $aTag.data('page') 
     }, 
     success: function(response) { 
      $aTag.parents("li").replaceWith(response); 
     } 
    }); 
}); 

jQuery的。在（）

$('.dislike_black').on("click", function(e) { 
    e.preventDefault(); 
    alert("test"); 
    var $aTag = $(this); 
    $.ajax({ 
     url: $aTag.attr('href'), 
     type: "POST", 
     data: { 
      "sort": $aTag.data('sort'), 
      "page": $aTag.data('page') 
     }, 
     success: function(response) { 
      $aTag.parents("li").replaceWith(response); 
     } 
    }); 
}); 

更多信息

• jQuery.live()
• jQuery.on()

Answer 2

嘗試使用事件代表團。

// older jquery, use this line: 
// $(".dislike_black").live("click", function (e) { 
$(document).on("click", ".dislike_black", function (e) { 
    e.preventDefault(); 
    alert("test"); 
    var $aTag = $(this); 
    $.ajax({ 
     url : $aTag.attr('href'), 
     type : "POST", 
     data : { 
      "sort" : $aTag.data('sort'), 
      "page" : $aTag.data('page') 
     }, 
     success: function (response) { 
      $aTag.parents("li").replaceWith(response); 
     } 
    }); 
}); 

Answer 3

因爲您正在用ajax成功處理程序中的新html替換包含錨本身的dom。在這種情況下，您應該使用on，它會將事件處理程序附加到父元素或文檔元素，無論您作爲根元素傳遞什麼，但只會在您作爲第二個參數傳遞的匹配選擇器上觸發事件。嘗試這個。

$(document).on('click', '.dislike_black', function(e) { 
    e.preventDefault(); 
    alert("test"); 
    var $aTag = $(this); 
    $.ajax({ 
     url: $aTag.attr('href'), 
     type: "POST", 
     data: { 
      "sort": $aTag.data('sort'), 
      "page": $aTag.data('page') 
     }, 
     success: function(response) { 
      $aTag.parents("li").replaceWith(response); 
     } 
    }); 
}); 

.on()參考：（版本1.7+）http://api.jquery.com/on/

如果您在使用jQuery的舊版本仍然可以做到這一點使用方法delegate其語法是相同on只是第2個參數被互換。

$(document).delegate('.dislike_black', 'click', function(e) { 
    //Your code here 
}); 

.delegate()參考：http://api.jquery.com/delegate/

Answer 4

嘗試

$(document).delegate('.dislike_black',"click",function(e) {