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

沒有測試過，但是這是想法。