jquery.live ('click') vs. click()

( Note 29/08/2017: live a été déprécié il y a de nombreuses versions et supprimé dans v1.9. delegate a été déprécié en v3.0. Dans les deux cas, utilisez plutôt la signature délégante de on [voir aussi ci-dessous].)

live se produit en capturant l'événement quand il est bouillonné tout le long du DOM à la racine du document, puis en regardant l'élément source. click se produit en capturant l'événement sur l'élément lui-même. Donc, si vous utilisez live , et que l'un des éléments ancêtre bloque l'événement directement (et l'empêche de continuer à bulles), vous ne verrez jamais l'événement sur votre élément. Alors que normalement, l'élément le plus proche de l'événement (clic ou n'importe quoi) obtient la première prise à elle, le mélange des événements live et non- live peut changer cela de manière subtile.

par exemple:

jQuery(function($) {

  $('span').live('click', function() {
    display("<tt>live</tt> caught a click!");
  });

  $('#catcher').click(function() {
    display("Catcher caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<div>
  <span>Click me</span>
  <span>or me</span>
  <span>or me</span>
  <div>
    <span>I'm two levels in</span>
    <span>so am I</span>
  </div>
  <div id='catcher'>
    <span>I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span>me too</span>
  </div>
</div>
<!-- Using an old version because `live` was removed in v1.9 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

je recommande d'utiliser delegate au lieu de live quand vous le pouvez, de sorte que vous pouvez contrôler plus complètement la portée; avec delegate , vous contrôlez l'élément racine qui capture l'événement de bouillonnement (par exemple, live est essentiellement delegate en utilisant la racine du document comme la racine). De plus, il est recommandé d'éviter (dans la mesure du possible) d'avoir delegate ou live en interaction avec un événement non délégué et non en direct. manutention.

ici, plusieurs années plus tard, vous n'utiliseriez pas live ou delegate ; vous utiliseriez la signature délégante de on , mais le concept est toujours le même: l'événement est accroché sur l'élément que vous appelez on sur, mais alors tiré seulement lorsque les descendants correspondent au sélecteur donné après le nom de l'événement:

jQuery(function($) {

  $(document).on('click', 'span', function() {
    display("<tt>live</tt> caught a click!");
  });

  $('#catcher').click(function() {
    display("Catcher caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<div>
  <span>Click me</span>
  <span>or me</span>
  <span>or me</span>
  <div>
    <span>I'm two levels in</span>
    <span>so am I</span>
  </div>
  <div id='catcher'>
    <span>I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span>me too</span>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

tous les objets qui seraient associés avec le .cliquez sur doit exister lorsque vous définissez l'événement.

exemple: (en pseudo code) l'ajout peut être $("body").append() par exemple

append('<div id="foo" class="something">...</div>');
$("div.something").click(function(){...});
append('<div id="bar" class="something">...</div>');

Click fonctionne pour foo mais ne fonctionne pas pour bar

Exemple2:

append('<div id="foo" class="something">...</div>');
$("div.something").live("click",function(){...});
append('<div id="bar" class="something">...</div>');

cliquez sur fonctionne pour les foo et bar

With .live ('click'... vous pouvez ajouter dynamiquement plus d'objets après vous créé l'événement et l'événement de clic fonctionnera toujours.

"live" est nécessaire pour générer dynamiquement du code. Il suffit de regarder l'exemple ci-dessous :

$("#div1").find('button').click(function() {
    $('<button />')
     .text('BUTTON')
     .appendTo('#div1')
})
$("#div2").find('button').live("click", function() {
    $('<button />')
     .text('BUTTON')
     .appendTo('#div2')
})

button {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id="div1">
  <button>Click</button>
</div>
<div id="div2">
  <button>Live</button>
</div>

sans "live" l'événement click se produit seulement lorsque vous cliquez sur le premier bouton, avec "live" l'événement click se produit aussi pour les boutons générés dynamiquement

utilisez toujours click si vous n'ajoutez pas dynamiquement des éléments.

live fonctionne en ajoutant un écouteur d'événements à la racine du document et écoute pour les événements bouillonnés. Une alternative est delegate , qui fonctionne de la même manière, mais lie le gestionnaire d'événements à l'élément spécifié.

De cette façon, l'événement n'a pas à bouillonner tout le DOM et est pris plus tôt.

.live() est utilisée si des éléments sont ajoutés après le chargement initial de la page. Supposons que vous ayez un bouton qui est ajouté par un appel AJAX après le chargement de la page. Ce nouveau bouton ne sera pas accessible en utilisant .cliquez sur(), de sorte que vous aurez à utiliser .live ('click')

d'après ce que j'ai compris, la différence clé est que live() garde un oeil ouvert pour les nouveaux éléments DOM qui correspondent au sélecteur sur lequel vous travaillez, alors que click() (ou bind('click')) attache le crochet d'événement et sont finis.

étant donné qu'une partie de votre code est chargée asynchrone, l'utilisation de live() vous facilitera la vie. Si vous ne connaissez pas exactement le code que vous chargez mais que vous savez quels types d'éléments vous écouterez, alors en utilisant cette fonction le sens parfait.

en termes de gains de performance, une alternative à l'utilisation de live() serait d'implémenter une fonction de callback AJAX pour re-lier les hooks d'événement.

var ajaxCallback = function(){
 $('*').unbind('click');
 $('.something').bind('click', someFunction);
 $('.somethingElse').bind('click', someOtherFunction);
}

vous aurez besoin de garder une bonne trace de vos hooks d'événement et assurez-vous que cette fonction est de rebobiner les événements appropriés.

p. S. Méthodes Ajax .obtenir. ,)(post. ,)(load() et .ajax() vous permettent de spécifier une fonction de rappel.

comme "live" gérera les événements pour les éléments futurs qui correspondent au sélecteur courant, vous pouvez choisir click car vous ne voulez pas que cela se produise - vous voulez seulement gérer les éléments actuellement sélectionnés.

aussi, je soupçonne (bien que n'ayant aucune preuve) qu'il y a une légère efficacité en utilisant 'clic' sur 'live'.

Lee

si vous avez besoin de simplifier le code, alors vivre est mieux dans la plupart des cas. Si vous avez besoin pour obtenir les meilleures performances, alors délégué sera toujours mieux que de vivre. bind (cliquez) vs delegate n'est pas une question aussi simple (si vous avez beaucoup d'éléments similaires, alors delegate sera mieux).

n'oubliez pas que l'utilisation de "live" est pour "jQuery 1.3" ou plus haut

dans la version "jQuery 1.4.3" ou plus est utilisé "délégué

et la version "jQuery 1.7 +" ou plus est utilisé "sur "

$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
$( document ).on( events, selector, data, handler ); // jQuery 1.7+

de jQuery 1.7, l' .la méthode live () est dépréciée.

check http://api.jquery.com/live /

en ce qui Concerne, Fernando

En plus de T. J. Crowders réponse , j'ai ajouté un peu plus de gestionnaires - y compris le plus récent .on(...) gestionnaire à l'extrait de sorte que vous pouvez voir les événements qui sont cachés et ceux qui pas.

ce que j'ai aussi trouvé est que .live() est non seulement déprécié, mais a été supprimé depuis jQuery 1.9.x. Mais les autres, c'est-à-dire

.click , .delegate / .undelegate et .on / .off

sont toujours là.

notez aussi qu'il y a plus de discussion sur ce sujet ici sur Stackoverflow .

si vous avez besoin de corriger le code d'héritage qui est en se basant sur .live, mais vous avez besoin d'utiliser une nouvelle version de jQuery (>1.8.3), vous pouvez le corriger avec cet extrait:

// fix if legacy code uses .live, but you want to user newer jQuery library
if (!$.fn.live) {
    // in this case .live does not exist, emulate .live by calling .on
    $.fn.live = function(events, handler) {
      $(this).on(events, null, {}, handler);
    };
}

l'intention du snippet ci-dessous, qui est une extension du script de T. J., est que vous pouvez essayer par vous - même instantanément ce qui se passe si vous liez plusieurs gestionnaires-alors s'il vous plaît exécuter le snippet et cliquez sur les textes ci-dessous:

jQuery(function($) {

  // .live connects function with all spans
  $('span').live('click', function() {
    display("<tt>live</tt> caught a click!");
  });

  // --- catcher1 events ---

  // .click connects function with id='catcher1'
  $('#catcher1').click(function() {
    display("Click Catcher1 caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  // --- catcher2 events ---

  // .click connects function with id='catcher2'
  $('#catcher2').click(function() {
    display("Click Catcher2 caught a click and prevented <tt>live</tt>, <tt>delegate</tt> and <tt>on</tt> from seeing it.");
    return false;
  });

  // .delegate connects function with id='catcher2'
  $(document).delegate('#catcher2', 'click', function() {
    display("Delegate Catcher2 caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  // .on connects function with id='catcher2'
  $(document).on('click', '#catcher2', {}, function() {
    display("On Catcher2 caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  // --- catcher3 events ---

  // .delegate connects function with id='catcher3'
  $(document).delegate('#catcher3', 'click', function() {
    display("Delegate Catcher3 caught a click and <tt>live</tt> and <tt>on</tt> can see it.");
    return false;
  });

  // .on connects function with id='catcher3'
  $(document).on('click', '#catcher3', {}, function() {
    display("On Catcher3 caught a click and and <tt>live</tt> and <tt>delegate</tt> can see it.");
    return false;
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});

<!-- with JQuery 1.8.3 it still works, but .live was removed since 1.9.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

<style>
span.frame {
    line-height: 170%; border-style: groove;
}
</style>

<div>
  <span class="frame">Click me</span>
  <span class="frame">or me</span>
  <span class="frame">or me</span>
  <div>
    <span class="frame">I'm two levels in</span>
    <span class="frame">so am I</span>
  </div>
  <div id='catcher1'>
    <span class="frame">#1 - I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span class="frame">me too</span>
  </div>
  <div id='catcher2'>
    <span class="frame">#2 - I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span class="frame">me too</span>
  </div>
  <div id='catcher3'>
    <span class="frame">#3 - I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span class="frame">me too</span>
  </div>
</div>