Ajax demande à php ne fonctionne qu'une fois par pageload

Question

J'ai vu quelques-unes de ces questions postées ici mais aucun d'entre eux ne fonctionne pour moi. J'ai un bouton favori que je voudrais que mes utilisateurs pressent aux choses préférées. La requête ajax fonctionne très bien et le favori est stocké dans la base de données mais je ne peux l'utiliser qu'une seule fois puis je dois actualiser la page pour fav/unfav l'élément. Le code du bouton est:

<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'); 
     } 
    }); 
    }); 

Alors cela fonctionne, mais une seule fois! J'ai essayé deux fonctions différentes pour essayer faire ce travail, y compris:

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

Quelqu'un peut-il me dire où je me trompe et la bonne méthode pour obtenir mon bouton pour travailler plusieurs fois?

Answer 1

Utilisez $(document).on() cliquez sur événement

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