jQuery Problème: les fonctions ne fonctionneront pas sur l'élément HTML nouvellement créé

Question

J'ai deux fonctions: une qui crée un nouveau <textarea> quand un bouton est cliqué, et une deuxième fonction qui exécute une action lorsque le <textarea> est cliqué (ou flou, changé, etc.) Cette deuxième fonction sélectionne les éléments basés sur un nom de classe. Il semble que la deuxième fonction ne fonctionne que sur les éléments correspondants qui existaient lors du chargement de la page, mais qu'elle ne s'activera pas sur les éléments <textarea> nouvellement créés. Quelqu'un peut-il comprendre pourquoi et comment résoudre ce problème? Vous trouverez le code ci-dessous. Merci. --Jake

$('#add').click(function() { 
    $(this).before("<textarea class='test'></textarea>") 
}) 

$('.test').blur(function() { 
    alert('just a test') 
}) 

Answer 1

Le textarea vous créez est pas autour au moment jQuery attribue l'action à des éléments marqués avec la classe .test. Vous aurez besoin de la fonction live() pour que cela fonctionne comme vous le souhaitez.

$('.test').live('blur', function() { 
    alert('just a test') 
}); 

Maintenant tout élément marqué avec .test se liera automatiquement la fonction spécifiée sur le flou, peu importe quand il est créé.

Answer 2

Vous pouvez lier directement:

$('#add').click(function() { 
    $(this).before("<textarea class='test'></textarea>").prev().blur(function() { 
     alert('just a test'); 
    }); 
}); 

Ou placer l'utilisation jQuery's .delegate() method pour placer un gestionnaire sur le parent de #add.

$('#add').click(function() { 
    $(this).before("<textarea class='test'></textarea>") 
}).parent().delegate('.test','blur',function() { 
    alert('just a test'); 
}); 

Cette approche est plus efficace que l'utilisation .live().