Jquery - 在点击div触发ajax帖子，并不会禁用后点击

Question

我有一个简单的div，我用它来触发ajax帖子。点击时，我会通过其中一个类调用该对象。当我再次提交和渲染同一个对象时，我不希望它是可点击的，所以我从对象中删除类，但它仍然是点击，即使在dom中它已经消失。任何想法如何防止再次点击对象？

Ajax帖子正常工作，试图找出提交完成后如何停止另一次点击。

代码：

HTML：

<div class="likeContent"> 
    <div class="bylineBox right likeThisLink" id="like-this-<?php echo get_comment_ID(); ?>"> 
     <a href="#" onclick="return false;" class="likeThisContent"> 
      <span> 
       <img src="<?php bloginfo('template_url'); ?>/images/like-icon.png" alt="Like" /> 
       <?php if ($current_like_count[0] > 0) { echo $current_like_count[0];} else {echo 'Like';} ?> 
      </span> 
     </a> 
    </div> 
</div> 

JS（jQuery函数）：

$('.likeThisLink').click(function(e) { 
    var contentID = $(this).attr("id").split("-")[2]; 
    var siteURL = $('.siteURL').attr("id"); 
    var templateURL = $('.templateURL').attr("id"); 
    var processURL = siteURL + "/wp-admin/admin-ajax.php" 
    $.post(processURL,{ 
     action: 'my_unique_action', 
     content_id: contentID }, 
     function(data) { 
     var currentLikeCount = $('.likeCount-' + contentID).attr("id").split("-")[1]; 
     var newLikeCount = parseInt(currentLikeCount) + 1; 
     $('#like-this-'+contentID).fadeOut().html("<a><span><img src=\"" + templateURL + "/images/like-icon.png\" alt=\"Like\" />" + newLikeCount + "</span></a>").fadeIn(); 
     $('.likeCount-' + contentID).attr("id", "likeCountCurrent-" + newLikeCount); 
     e.preventDefault(); 
     }); 
    $(this).removeClass('likeThisLink') 
}); 

Answer 1

您可以使用jQuery的one功能此类似：

$(".likeThisLink").one("click", function() { 
.... 
}); 

无论点击多少次，代码只会执行一次。你可以阅读它在这里http://api.jquery.com/one/

编辑或者，你可以取消绑定点击功能是这样的：

$('.likeThisLink').unbind('click'); 

Answer 2

我会改变你如何做绑定：

$(document).on('click', '.likeThisLink', function(e) { 
    var contentID = $(this).attr("id").split("-")[2]; 
    var siteURL = $('.siteURL').attr("id"); 
    var templateURL = $('.templateURL').attr("id"); 
    var processURL = siteURL + "/wp-admin/admin-ajax.php" 
    $.post(processURL,{ 
     action: 'my_unique_action', 
     content_id: contentID }, 
     function(data) { 
     var currentLikeCount = $('.likeCount-' + contentID).attr("id").split("-")[1]; 
     var newLikeCount = parseInt(currentLikeCount) + 1; 
     $('#like-this-'+contentID).fadeOut().html("<a><span><img src=\"" + templateURL + "/images/like-icon.png\" alt=\"Like\" />" + newLikeCount + "</span></a>").fadeIn(); 
     $('.likeCount-' + contentID).attr("id", "likeCountCurrent-" + newLikeCount); 
     e.preventDefault(); 
     }); 
    $(this).removeClass('likeThisLink') 
}); 

这样它不会是一个静态绑定，而是将继续使用选择器（这将允许您通过更改类来管理它）。

Answer 3

一个简单的解决方案是使用全局布尔值标记按钮已被点击并发出请求。如果发生其他点击，您将忽略发布请求。一旦帖子请求返回（成功或错误地），您将标记标记回初始状态。

例子：

var disabledButtons = {}; 
$('.class').click(function() { 
    var id = $(this).attr('id'); 

    if(disabledButtons[id] != true) { 
     disabledButtons[id] = true; 
     $.ajax({ 
      success: function() { 
       disabledButtons[id] = false; 
      }, 
      error: function() { 
       disabledButtons[id] = false; 
      } 
     }); 
    } 
}); 

没有测试过，但是这是想法。