Comment puis-je attribuer gestionnaire d'événements à des objets de la page en ajax et UJS

Question

Quelqu'un peut-il s'il vous plaît conseiller une bonne approche de ce problème:

Sur chargement de la page, un gestionnaire d'événements est ajouté à un élément de page. Par exemple:

// Javascript 
// when page is loaded... 
jQuery(document).ready(function) { 
    // assign this handler to the buttonDiv element... 
    jQuery("#buttonDiv").click(function() { 
    // to alert "hello" 
    alert("hello"); 
    }); 
} 


// HTML 5 
<div id="buttonDiv">Click me </div> 

Cela fonctionne comme prévu - GRAND!

Mais supposons que le div#buttonDiv n'était pas présent lorsque le document est chargé et est ajouté au DOM ultérieurement en utilisant Ajax. Dans ce cas, le gestionnaire d'événements click() n'est pas ajouté et aucune alerte ne sera appelée.

Comment ajouter un gestionnaire d'événement à cet élément sans utiliser le javascript en ligne?

Toutes les suggestions sont les bienvenues.

Answer 1

C'est ce que .live() est pour :) Comme ceci:

jQuery(function) { 
    jQuery("#buttonDiv").live("click", function() { 
    alert("hello"); 
    }); 
}); 

.live() ne pas ajouter un gestionnaire d'événements lorsqu'un élément est ajouté vraiment, mais il ajoute un gestionnaire d'événements à document lorsque vous l'exécutez, et écoute les événements click qui explosent. Comme les anciens et les nouveaux éléments font la même chose ... peu importe quand ils ont été ajoutés, le gestionnaire click fonctionne toujours, à condition que le sélecteur corresponde.

Il y a aussi une semblable .delegate() (qui utilise même .live() interne) que vous pouvez utiliser si vous connaissez le bouton sera à l'intérieur d'un certain récipient, supposons que vous rechargeons le conteneur #content via AJAX, ce serait ressembler à ceci:

jQuery(function) { 
    jQuery("#content").delegate("#buttonDiv", "click", function() { 
    alert("hello"); 
    }); 
}); 

cela ajoute que l'auditeur pour les événements à bulles #content qui permet d'économiser seulement quelques bulles avant l'attraper, plutôt que d'avoir aller tout le chemin à document ... dans la pratique, soit sont très bien et vous pouvez ne pas dire la différence de performance, sauf si vous faites un tonne de .live() gestionnaires d'événements.