2010-09-06 5 views
4

Tenir compte du following code:Quelle est la différence entre .click (...) et .live ('click', ...)?

HTML:

<div id='button' class='enabled'>Press here</div> 
<div id='log'></div> 

CSS:

#button { 
    width: 65px; 
    height: 25px; 
    background-color: #555; 
    color: red; 
    padding: 10px 20px; 
} 
#button.enabled { 
    color: #333; 
} 
#button.enabled:hover { 
    color: #FFF; 
    cursor: pointer; 
} 

JavaScript:

$(function() { 
    $('#button.enabled').live('click', function() { // (1) 
    //$('#button.enabled').click(function() {   // (2) 
     log('#button.enabled clicked'); 
    }); 
}); 
function log(str) { 
    $('#log').append(str + '<br />'); 
    $('#button').toggleClass('enabled'); 
} 

Ce code fonctionne comme prévu, à savoir log() est appelée que lorsqueLe bouton 0 est cliqué. Mais, si je remplace (1) par (2), log() est appelée aussi quand le bouton enabled n'est pas cliqué.
Pourquoi est-ce?
Quelle est la différence entre (1) et (2)?

Répondre

14

La différence est que .click() lie un gestionnaire click à l'élément. C'est la chose la plus importante, à l'élément, donc quel que soit éléments le sélecteur $('#button.enabled') correspond au moment où il est lié, se ... lié quel que soit le sélecteur, il ne correspond plus tard.

.live() vérifie le sélecteur au moment de l'événement pour voir si elle doit exécuter le gestionnaire ... afin de changer la classe ne fait la matière, car elle ne correspond plus. Le gestionnaire .live() vit sur document et s'appuie sur event bubbling, il doit donc vérifier le sélecteur pour voir s'il provient d'un élément pour lequel il doit exécuter le gestionnaire.

+0

Merci beaucoup Nick! Tu es le meilleur !! –

+0

@Misha - bienvenue :) espérons que cela couvre clairement, c'est définitivement un point de confusion pour * beaucoup * d'utilisateurs jQuery. –

1

Dans le numéro 2, la fonction de clic est appliquée à tous les boutons activés à ce moment. Donc, si un bouton n'est pas activé lorsque la fonction est appelée, elle ne sera jamais activée.

Dans le numéro 1, la fonction de clic est appliquée quand elle est nécessaire, c'est-à-dire s'il y a un changement dans le DOM que cet élément est vérifié pour voir si la fonction de clic doit lui être appliquée.

Questions connexes