Ajax對php的請求每個頁面加載一次

Question

我已經在這里看到了其中一些問題，但沒有一個對我有用。 我有一個收藏夾按鈕，我希望我的用戶按此按鈕可以收藏夾東西。 Ajax請求工作正常，並且收藏夾被存儲在數據庫中，但是我只能使用一次，然后必須刷新頁面才能收藏/取消收藏該項目。 該按鈕的代碼是：

<div id="fav-icon">
    <?php
    // Function checks if user has fav'd the item.
    $isFav = favourite($user->id) ? 'un-fav' : 'fav'; 
    ?>
    <i id="<?php echo $item->id; ?>" class="<?php echo $isFav; ?>"><span class="font-12 fa fa-heart"></span></i>
</div>

jQuery /阿賈克斯

$('.fav').click(function(e){
    var con = $(this).attr('id');
    $.ajax({
      url: 'fav.php',
      type: 'POST',
      async: true,
      data:{
        'fav' : con
      },
      success:function(){ 
        $('#fav-icon').load(document.URL +  ' #fav-icon');
      }
    });
  });

  $('.un-fav').click(function(e){
    var con = $(this).attr('id');
    $.ajax({
      url: 'fav.php',
      type: 'POST',
      async: true,
      data:{
        'fav' : con
      },
      success:function(){ 
        $('#fav-icon').load(document.URL +  ' #fav-icon');
      }
    });
  });

所以這有效，但只有一次！ 我嘗試了幾種不同的功能來嘗試完成這項工作，包括：

$('.fav').live('click', function(e) {

誰能告訴我我要去哪里錯以及使按鈕多次起作用的正確方法？

Answer 1

使用$(document).on()單擊事件

$(document).on('click','.fav', function(e) { 
...
});