aide à comprendre la logique derrière la façon dont javascript exécute sur les nouveaux éléments dom créé à la volée

Question

je une cette configuration

<ul> 
<li>item 1</li> 
</ul> 

mes js me laisser faire triables et ce pas, une caractéristique que j'ai est que via ajax je peux créer un nouvel élément de liste à la volée. Mais ce qui est intéressant, c'est que j'ai un hoverIntent qui me laisse passer la souris sur l'élément de la liste et une icône de suppression et de modification apparaît, me permettant d'effectuer les actions prévues.

Mon problème est que lorsque je crée un nouvel élément de liste à la volée, le hoverIntent ne lui est pas appliqué. Le code créé est identique aux autres éléments de la liste, je sais que cela fonctionne parce que lorsque j'actualise la page et recharge les js, alors le hoverIntent entre et applique les effets de hover aux nouveaux éléments créés.

Rien de tout cela fonctionne à la volée, comment puis-je faire ce travail?

mes js pour la création d'un nouvel élément de liste est:

var timestamp = 0; 
    $('.new-group').click(function(e){ 

     // Only one group per 5 seconds is allowed: 
     if((new Date()).getTime() - timestamp < 5000) return false; 

     $.get("resources/ajax/groups.ajax.php",{ 
      action :'new', 
      uid  : uid, 
      text :'New Group, Doubleclick to Edit.' 
     },function(data){ 
      $(data).hide().appendTo('.grouplist').fadeIn(); 
      //GROUP.find(".groups-action-div").show('slow'); 
     }); 
     timestamp = (new Date()).getTime(); 
     e.preventDefault(); 
    }); 

Je parie que dans ma fonction succès est où je peux faire ce travail,

vous pouvez vous connecter et de voir mon problème sur www.helixagent.com avec connexion comme test/mot de passe allez dans les onglets Contacts et cliquez sur l'icône + pour créer un nouveau groupe

Answer 1

hoverIntent charge l'effet sur le chargement de la page, ce qui signifie que lorsque vous créez un nouvel élément, vous ont déjà exécuté les aspects hoverIntent, un d il ne s'applique pas à l'élément nouvellement créé.

Fondamentalement, il vous suffit de lancer à nouveau hoverIntent

Je ne l'ai pas testé, mais vous auriez besoin de faire quelque chose comme ceci:

var timestamp = 0; 
$('.new-group').click(function(e){ 

    // Only one group per 5 seconds is allowed: 
    if((new Date()).getTime() - timestamp < 5000) return false; 

    $.get("resources/ajax/groups.ajax.php",{ 
     action :'new', 
     uid  : uid, 
     text :'New Group, Doubleclick to Edit.' 
    },function(data){ 
     $(data).hide().appendTo('.grouplist').fadeIn(); 
     //GROUP.find(".groups-action-div").show('slow'); 
    }); 
    timestamp = (new Date()).getTime(); 
    e.preventDefault(); 


    var config_names = { 
     over: show_delete_names, 
     timeout: 200, 
     out: hide_delete_names 
    }; 
    $(".contactlist li:last-child").hoverIntent(config_names); 
});