jQuery/PHP喜歡/不像按鈕

Question

堆棧再次親愛的朋友...

我想創建一個簡單的/不像按鈕更新數據庫。 jQuery代碼位於外部文件中。 PHP變量由Codeigniter中的控制器發送。

當頁面加載新鮮時，它會正確顯示當前登錄的用戶是否可以喜歡或不同於他們正在查看的用戶。如果他們點擊一次，一切都按原樣進行 - 按鈕在Like/like之間變化，喜歡的數量增加或減少，數據庫更新。再次點擊時，它會重新加載整個頁面，但不會更新數據庫 - 如何停止刷新並在沒有頁面重新加載的情況下更新？

的PHP：

<div id="like_button"> 

<p><a href=""><span id="like_unlike" class="link"><?php if($already_liked){echo "Unlike";}else{echo"Like";}?></span></a> (<span id="number_of_likes"><?php echo $number_of_likes; ?></span>)</p> 

<span id="liked_unliked_user_id" style="display:none"><?php echo $liked_unliked_user_id; ?></span> 
<span id="liking_unliking_user_id" style="display:none"><?php echo $liking_unliking_user_id; ?></span> 

</div> 

jQuery的：

$(function() { 

$('#like_button a').click(function(e) { 

    var thisrecord = $(this).closest("div"); 

    var liking_unliking_user_id = parseInt(thisrecord.find("span#liking_unliking_user_id").html()); 
    var liked_unliked_user_id = parseInt(thisrecord.find("span#liked_unliked_user_id").html()); 
    var like_unlike = thisrecord.find("#like_unlike").html(); 


    if (like_unlike == 'Like') 
    { 
    $(this).replaceWith('<a href=""><span id="like_unlike" class="link">Unlike</span></a>'); 
    var likes = parseInt(thisrecord.find("span#number_of_likes").html()) + 1; 
    thisrecord.find("span#number_of_likes").html(likes); 
    $.post(base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id); 
    } 
    else 
    { 
    $(this).replaceWith('<a href=""><span id="like_unlike" class="link">Like</span></a>'); 
    var likes = parseInt(thisrecord.find("span#number_of_likes").html()) - 1; 
    thisrecord.find("span#number_of_likes").html(likes); 
    $.post(base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id); 
    } 

    e.preventDefault(); 
}); 
}); 

Answer 1

當你第一次創建.click()事件的jQuery選擇查找所有'#like_button a'元素和重視這一事件給他們。當您使用$(this).replaceWith(...)替換元素時，此新元素不會將.click()事件附加到它，因爲您的原始選擇器只運行一次附加事件（此時此元素不存在）。

在您的代碼中，頁面會重新加載，因爲您只需點擊鏈接返回到當前頁面 - 您的.click()功能可以阻止的事件爲e.preventDefault()。

如果命名功能，然後更換這應該正常工作對象之後重新連接.click()事件：

$(function() { 
    function toggleLike(e) 
    { 
     var thisrecord = $(this).closest("div"); 

     var liking_unliking_user_id = parseInt(thisrecord.find("span#liking_unliking_user_id").html()); 
     var liked_unliked_user_id = parseInt(thisrecord.find("span#liked_unliked_user_id").html()); 
     var like_unlike = thisrecord.find("#like_unlike").html(); 


     if (like_unlike == 'Like') 
     { 
      $(this).replaceWith('<a href=""><span id="like_unlike" class="link">Unlike</span></a>'); 
      var likes = parseInt(thisrecord.find("span#number_of_likes").html()) + 1; 
      thisrecord.find("span#number_of_likes").html(likes); 
      $('#like_button a').click(toggleLike); // **frakenstein teh .click() event 
      $.post(base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id); 
     } else { 
      $(this).replaceWith('<a href=""><span id="like_unlike" class="link">Like</span></a>'); 
      var likes = parseInt(thisrecord.find("span#number_of_likes").html()) - 1; 
      thisrecord.find("span#number_of_likes").html(likes); 
      $('#like_button a').click(toggleLike); // **frakenstein teh .click() event 
      $.post(base_url+"/controller/function/" + liked_unliked_user_id + "/" + liking_unliking_user_id); 
     } 

     e.preventDefault(); 
    } 

    $('#like_button a').click(toggleLike); 
});