javascript - 对 php 的 Ajax 请求每次页面加载只能运行一次

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/Ajax

$('.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) { 
...
});