L'ajout d'un élément avec un gestionnaire d'événements à un ensemble d'éléments

Question

Considérons le javascript/code jQuery:

jQuery("<input/>").attr("type", "button").attr("value", "Click me") 
    .click(function() 
    { 
     alert("hello"); 
    }) 
    .appendTo(".someDiv"); 

Cela crée un bouton, se fixe un gestionnaire d'événement et l'ajoute à tous les éléments avec la classe « someDiv ".

Cela fonctionne comme prévu SEULEMENT s'il n'y a qu'un seul élément avec la classe "someDiv" dans le document. S'il y en a plus, les boutons sont affichés, mais l'événement click n'est pas déclenché.

Je suis conscient que je peux utiliser la solution suivante:

jQuery(".someDiv").each(function() 
    { 
    jQuery("<input/>").attr("type", "button").attr("value", "Click me") 
     .click(function() 
     { 
      alert("hello"); 
     }) 
     .appendTo(this); 
    }); 

Ce qui fonctionne, mais est sans doute moins élégante. Je suppose que cela a quelque chose à voir avec le fait que dans le premier exemple, il n'y a qu'un élément créé et que le même élément est ajouté à tous les "someDiv", alors que dans le second exemple il y a plusieurs éléments créés, mais Je ne comprends pas pourquoi cela signifierait que le gestionnaire d'événements ne fonctionne pas dans le premier exemple.

Answer 1

Avez-vous essayé quelque chose comme ceci:

jQuery("<input/>").attr("type", "button").attr("value", "Click me") 
              .appendTo(".someDiv"); 
    jQuery('.someDiv input[type=button]').click(function() 
    { 
     alert("hello"); 
    }); 

Answer 2

C'est un peu une drôle de façon de le faire. Je le câblerais avec live.

$("input[type=button]").click(function() { 
    alert("hello"); 
}); 

également pas sûr de ce que plusieurs appels attr fait pour vous:

(".someDiv").append("<input type='button' value='Click me' />"); 

Answer 3

Je pense que ce que vous recherchez est clone (true). Il va faire une copie de l'élément DOM et de ses gestionnaires d'événements.

jQuery("<input/>").attr("type", "button").attr("value", "Click me") 
.click(function() 
{ 
    alert("hello"); 
}) 
.clone(true) 
.appendTo(".someDiv");