Ajax - 防止单击成功的ajax请求

Question

我的页面上有一个视频缩略图，带有一个小拇指“Thumbs Down”。当您单击它时，另一个缩略图显示，替换另一个。用户可以随心所欲地做到这一点。

我的代码现在才第一次使用。 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

因为你正在用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()参考：http://api.jquery.com/on/（Ver.1.7 +）

如果您使用的是旧版本的jQuery，您仍然可以使用delegate方法实现此目的，该方法的语法与on相同，但只有前两个参数互换。

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

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

Answer 2

您的内容是动态创建的，因此，根据您使用的jQuery版本，您需要jQuery.live()或jQuery.on()方法

  

jQuery.live（），因为jQuery 1.3 是当前和未来与当前选择器匹配的所有元素的事件处理程序。

     

jQuery.on（）自jQuery 1.7 - 将一个或多个事件的事件处理函数附加到所选元素。

样品

<强> 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.on（）

$('.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 3

尝试

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

Answer 4

尝试使用事件委派。

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