2010-07-07 7 views
8

J'utilise le plugin tooltip de jQuery Tools, qui est initialisé avec $('selector').tooltip(). Je voudrais appeler cela sur n'importe quel élément .tooltipper actuel ou futur. J'ai pensé que ce qui suit fonctionnerait:jQuery live avec l'événement ready ou load

$('.tooltipper').live('ready', function(){ 
    $(this).tooltip() 
} 

Mais cela n'a pas réussi --- l'événement prêt n'a pas été déclenché. La même chose pour la charge. J'ai lu que livequery peut produire le résultat que je recherche, mais il y a sûrement un moyen d'utiliser jQuery .live() pour le retirer, vu que la documentation dit que cela fonctionne pour tous les événements jQuery, dont je crois ready un.

+0

Si l'élément existe déjà, pourquoi utiliser '.live()'? Je pense que vous feriez mieux d'essayer de le lier à l'événement qui pourrait potentiellement créer de nouveaux sélecteurs. Pas directement une réponse, mais il semble comme une approche d'un fusil de chasse à utiliser '.live()' sur 'ready'. Juste mon $ .02. – HurnsMobile

+0

Je pense de cette façon. Certains éléments doivent toujours présenter certains comportements. Par exemple, les liens avec un attribut 'href' devraient toujours vous mener à une URL lorsque vous cliquez dessus. La plupart des éléments avec un attribut 'title' doivent afficher le paramètre sous la forme d'une info-bulle au survol de la souris. Cela n'a de sens que d'activer ce type de fonctionnalité pour les comportements d'ordre supérieur, comme le tooltipping personnalisé. –

+1

J'ai fini par utiliser '$ ('. Tooltipper'). Livequery (function() {$ (this) .tooltip()})', ce qui me semble le plus sémantique (par opposition à la meilleure solution suivante, qui consiste à ajouter le rappel à la fonction qui crée l'élément tooltip) en ce que le comportement de l'info-bulle est associé à l'élément --- cela n'a rien à voir avec le processus par lequel il a été créé. –

Répondre

12

Cité de l'API jQ (http://api.jquery.com/live/):

Dans jQuery 1.3.x uniquement les événements JavaScript suivants (en plus des événements personnalisés) pourrait être lié avec .live(): cliquez, dblclick, keydown , appuyez sur une touche, enfoncez le bouton, mousedown, mousemove, mouseout, mouseover et mouseup. À partir de jQuery 1.4, la méthode .live() prend en charge les événements personnalisés ainsi que tous les événements JavaScript. A partir de jQuery 1.4.1, même le focus et le flou fonctionnent avec le mode live (mapping vers le plus approprié, le bullage, le focus et la mise au point des événements).

A partir de jQuery 1.4.1, l'événement hover peut être spécifié (mappage vers "mouseenter mouseleave").

.live() ne semble pas prendre en charge l'événement prêt.

5

Pour ajouter à l'excellente réponse de HurnsMobile; En regardant bindReady(), qui est l'appel interne jQuery fait de se lier à l'événement de chargement de documents chaque fois que vous appelez $(some_function) ou $(document).ready(some_function) nous voyons pourquoi nous ne pouvons pas lier à "ready":

bindReady: function() { 
     if (readyBound) { 
      return; 
     } 

     readyBound = true; 

     // Catch cases where $(document).ready() is called after the 
     // browser event has already occurred. 
     if (document.readyState === "complete") { 
      return jQuery.ready(); 
     } 

     // Mozilla, Opera and webkit nightlies currently support this event 
     if (document.addEventListener) { 
      // Use the handy event callback 
      document.addEventListener("DOMContentLoaded", DOMContentLoaded, false); 

      // A fallback to window.onload, that will always work 
      window.addEventListener("load", jQuery.ready, false); 

     // If IE event model is used 
     } else if (document.attachEvent) { 
      // ensure firing before onload, 
      // maybe late but safe also for iframes 
      document.attachEvent("onreadystatechange", DOMContentLoaded); 

      // A fallback to window.onload, that will always work 
      window.attachEvent("onload", jQuery.ready); 

      // If IE and not a frame 
      // continually check to see if the document is ready 
      var toplevel = false; 

      try { 
       toplevel = window.frameElement == null; 
      } catch(e) { //and silently drop any errors 
        } 
        // If the document supports the scroll check and we're not in a frame:  
      if (document.documentElement.doScroll && toplevel) { 
       doScrollCheck(); 
      } 
     } 
    } 

Pour résumer $(some_function), appelle fonction qui se lie à:

  • DOMContentLoaded
  • onreadystatechange (DOMContentLoaded)
  • window.load/onload

Votre meilleur pari serait de se lier à ces actions qui pourraient créer nouveaux .tooltipper éléments, plutôt que d'essayer d'écouter l'événement prêt (ce qui arrive une seule fois).

+0

Excellent! Merci pour le détail supplémentaire Sean! – HurnsMobile

+0

Merci pour la réponse réfléchie. J'ai lié les appels d'outils jQuery à des «constructeurs» à votre manière avant, mais l'idée de cette ligne de conduite est d'essayer d'éviter de faire cela entièrement. Mon raisonnement derrière cela est que l'utilité d'une bulle d'aide n'a rien à voir avec l'info-bulle en cours de construction, et plutôt intrinsèque dans l'info-bulle elle-même. –

1

HurnsMobile a raison. JQuery live ne supporte pas le ready-event.

C'est pourquoi j'ai créé un plugin qui combine les deux. Vous enregistrez votre rappel une fois, puis vous devrez appeler le plugin une fois pour le contenu que vous ajoutez manuellement.

$.liveReady('.tooltipper', function(){ 
    this.tooltip() 
}); 

Puis lors de la création du nouveau contenu:

element.html(somehtml); 
element.liveReady(); 

ou

$('<div class="tooltipper">...').appendTo($('body')).liveReady(); 

Une démo est disponible ici: http://cdn.bitbucket.org/larscorneliussen/jquery.liveready/downloads/demo.html

Vérifiez le post d'introduction ici: http://startbigthinksmall.wordpress.com/2011/04/20/announcing-jquery-live-ready-1-0-release/


ont également un oeil à http://docs.jquery.com/Plugins/livequery qui listenes des changements sur le Royaume.