無法實現使用jQuery的後續取消關注按鈕ajax

Question

情景：後續和取消關注操作的數據庫部分工作正常。 jquery和ajax部分必須存在一些問題，因爲只有在刷新頁面而不是單擊之後，按鈕纔會從後續更改爲取消關注（只有很少的css樣式）。如果不刷新，不止一次單擊該按鈕是不可能的。這裏是jQuery的部分

<script> 
function addfollow(friend,action) 
{ 
    $.ajax({ 
     url:"follow.php", 
     data:'friend='+friend+'&action='+action, 
     type:"POST", 
     success:function(data){ 
      switch(action){ 
       case "follow": 
       $("#"+friend).html('<input type="submit" id="'+friend+'" class="unfollow" value="unfollow" onClick="addfollow('+friend+',\'unfollow\')"/>'); 
       break; 
       case "unfollow": 
       $("#"+friend).html('<input type="submit" id="'+friend+'" class="follow" value="follow" onClick="addfollow('+friend+',\'follow\')"/>'); 
       break; 
      } 
     } 
    }); 
} 
</script> 

下面是調用上面的方法

<?php 
    $action="follow"; 
    if()//php code to check if user is already a follower 
    { 
     $action="unfollow"; 
    } 
    $friend=$name; 
?> 
<div class="col-sm-12"> 
    <input type="submit" id="<?php echo $friend;?>" class="<?php echo $action;?>" value="<?php echo $action?>" onClick="addfollow('<?php echo $friend;?>','<?php echo $action;?>')"> 
</div> 

由於HTML + PHP代碼，我DONOT擁有jQuery的阿賈克斯，所以我相信一定有什麼問題正確理解使用sucess中的語法：function（data）。 H

Answer 1

jQuery.html()。將獲得/設置匹配元素的INSIDE。這不是你想要的。嘗試.replaceWith()刪除當前元素並將其替換爲其他元素。

編輯：

您還可能有更好的運氣，如果你花了更多的JavaScript爲中心的方法。用php編寫javascript可能會讓人困惑。

如果你的php代碼剛剛創建了看起來像的元素。

<button> data-friend-id="<?php echo $friend;?>" class="follow-button <?php echo $action;?>" data-following="true"></button> 

然後，您可以處理JavaScript中的其他邏輯。喜歡的東西：

//Set a click handler on the follow buttons. 
$('.follow-button').click(handleFollowClick); 

function handleFollowClick() { 
    var $button, friend_id, action;  

    // jQuery will set 'this' to the button that was clicked. 
    $button = $(this); 

    // Extract data from the button. 
    friend = $button.data('friend-id'); 
    action = $button.data('following') === 'true' ? 'unfollow' : 'follow'; 

    $.ajax({ 
    url:"follow.php", 
    data:'friend='+friend+'&action='+action, 
    type:"POST", 
    success:function(data){ toggleFollow($button)} 
    }); 
} 

//You could actually get away with styling the button default as 
//not-following. Then just $button.toggleClass('follow'); but 
//this is consistent with your existing approach. 
toggleFollow($button) { 
    if ($button.data('following') === 'true) { 
    $button.data('following', 'false'); 
    $button.removeClass('unfollow'); 
    $button.addClass('follow'); 
    } else { 
    $button.data('following', 'true'); 
    $button.removeClass('follow'); 
    $button.addClass('unfollow'); 
    } 
}