Запрос Ajax на php работает только один раз за pageload

Question

Я видел несколько таких вопросов здесь, но ни один из них не работает для меня. У меня есть любимая кнопка, которую я бы хотел, чтобы мои пользователи нажимали на любимые вещи. Запрос ajax работает очень хорошо, и избранное хранится в базе данных, но я могу использовать его только один раз, тогда мне нужно обновить страницу до fav/unav item. Код кнопки:

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