Comment implémenter jquery live() au lieu de each()

Question

Salut J'ai essayé de faire fonctionner ce script http://jsbin.com/ipajo5/ mais en utilisant .live() au lieu de .each() puisque la table html est remplie à la volée.

$(document).ready(function() { 

    $('.bi').each(function() { 
    // options 
    var distance = 10; 
    var time = 250; 
    var hideDelay = 500; 

    var hideDelayTimer = null; 

    var beingShown = false; 
    var shown = false; 

    var trigger = $('.tt', this); 
    var popup = $('.popup', this).css('opacity', 0); 

    // set the mouseover and mouseout on both element 
    $([trigger.get(0), popup.get(0)]).mouseover(function() { 
     if (hideDelayTimer) clearTimeout(hideDelayTimer); 

     if (beingShown || shown) { 
     return; 
     } else { 
     beingShown = true;  
     popup.css({ 
      top: $(this).position().top-150, 
      left: $(this).position().left-100, 
      display: 'block' 
     }) 
     .animate({ 
      top: '-=' + distance + 'px', 
      opacity: 1 
     }, time, 'swing', function() { 
      beingShown = false; 
      shown = true; 
     }); 
     } 
    }).mouseout(function() { 
     if (hideDelayTimer) clearTimeout(hideDelayTimer); 

     hideDelayTimer = setTimeout(function() { 
     hideDelayTimer = null; 
     popup.animate({ 
      top: '-=' + distance + 'px', 
      opacity: 0 
     }, time, 'swing', function() { 
      shown = false; 
      popup.css('display', 'none'); 
     }); 
     }, hideDelay); 
    }); 
    }); 

});​ 

Remarque. Dans certains threads, il est recommandé d'utiliser delegate() à la place de live() pour les performances, mais après plusieurs jours, je veux seulement que cette popup/info-bulle fonctionne.

Merci.

Answer 1

Vous n'avez en fait besoin de rien changer. J'ai une fonction similaire, mais un peu plus étendue. Supprimez-le simplement de la fonction document.ready. Rappelez-vous, vous êtes mieux d'utiliser delegate() au lieu de live(). En raison de bouillonnement. Si vous voulez une page entièrement automatisée, qui est téléchargée à la volée, jetez un oeil à jaltiere.com

Mais vous devrez entièrement réécrire votre script. En outre, live() et delegate() sont difficiles à configurer avec les événements mouseover et mouseout.

Aucune mise en cache dans le document.ready:

Sur chargement de la page

$(document).ready(function() { 
      $.ajaxSetup({ cache: false });}); 

, faites votre ajax-appel et appelez votre script en fonction séparée:

$(function() { 
$.get("ajaxpage.php", function(data) { 
    $("#recent").html(data); 
    bifunct(); 
});}); 

fonction pour une mise à jour Separate:

function ajaxcall(){ 
$.get("ajaxpage.php?", function(data) { 
    $("#recent").html(data); 
    bifunct(); 
});}; 

Et maintenant votre script. J'ai changé votre mouseover et mouseout pour mouseenter et mouseleave. Ils travaillent légèrement mieux.

bifunct = function(){ 
$('.bi').each(function() { 
    // options 
    var distance = 10; 
    var time = 250; 
    var hideDelay = 500; 
    var hideDelayTimer = null; 
    var beingShown = false; 
    var shown = false; 
    var trigger = $('.tt', this); 
    var popup = $('.popup', this).css('opacity', 0); 

    // set the mouseover and mouseout on both element 
    $([trigger.get(0), popup.get(0)]).mouseenter(function() { 
     if (hideDelayTimer) clearTimeout(hideDelayTimer); 
     if (beingShown || shown) { 
      return; 
     } else { 
      beingShown = true;  
      popup.css({ 
       top: $(this).position().top-150, 
       left: $(this).position().left-100, 
       display: 'block' 
      }) 
      .animate({ 
       top: '-=' + distance + 'px', 
       opacity: 1 
      }, time, 'swing', function() { 
       beingShown = false; 
       shown = true; 
      }); 
     } 
    }).mouseleave(function() { 
     if (hideDelayTimer) clearTimeout(hideDelayTimer); 
     hideDelayTimer = setTimeout(function() { 
      hideDelayTimer = null; 
      popup.animate({ 
       top: '-=' + distance + 'px', 
       opacity: 0 
      }, time, 'swing', function() { 
       shown = false; 
       popup.css('display', 'none'); 
      }); 
     }, hideDelay); 
    }); 
});} 

Si vous souhaitez mettre à jour, il suffit de mettre dans votre corps, ou changer pour appeler la ajaxcall fonction:

<a onclick="ajaxcall();return false" href="#"> update </a> 

Answer 2

Remplacer ".each()" par ".live()" est très peu sensé. La fonction ".each()" est prévue pour itérer sur les parties du DOM qui ont été mises en correspondance par un sélecteur, ou bien pour itérer fonctionnellement les constituants d'un objet jQuery.

Tout ce que ".live()" peut faire est d'aider à la gestion des événements. Si vous avez besoin de faire d'autres choses sur des parties de votre page, car elles sont chargées dynamiquement, vous devrez les regrouper vous-même dans les gestionnaires de "succès" pour les mises à jour dynamiques, ou quelque chose de similaire.