阿贾克斯 - 防止点击一个成功的阿贾克斯请求

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) {