Comment puis-je avoir le comportement d’attachement de jQuery à un élément après son insertion?

J’ai un formulaire que je soumets via ajax et qui retourne une partie mise à jour du code HTML qui inclut un formulaire mis à jour que je souhaite soumettre via jquery.

Le problème que je rencontre est que la première fois que je clique sur Submit, l’événement est capturé par jQuery et fonctionne très bien. Lorsque je modifie à nouveau le formulaire sans l’actualiser, l’événement n’est pas capturé par jQuery, mais constitue une demande de publication standard.

Comment puis-je avoir jQuery attache le comportement à un élément après l’avoir inséré?

Voici mon code jQuery.

$('.edit_clothing_product').submit(function(){ var productDiv = $(this).parent(); var action = $(this).attr('action'); var formData = $(this).serialize(); $.post(action, formData, function(data){ productDiv.replaceWith(data); }); return false; });

Voici le code HTML (corrigé) que je retourne.

    ...{form fields} 
 Add Color Combo

Vous devrez attacher à nouveau le gestionnaire d’événements submit que vous avez défini car vous remplacez le formulaire. Vous pouvez faire de cette chose une fonction appelable afin de pouvoir l’invoquer plusieurs fois.

Autant que je sache, live ne fonctionne pas pour submit – vous pouvez peut-être attacher un gestionnaire d’événements click à live mais ce n’est pas exactement la même chose que .submit . Je voudrais juste définir une fonction comme ceci:

 function handleForm( el ) { $(el).submit(function(){ var productDiv = $(el).parent(); var action = $(el).attr('action'); var formData = $(el).serialize(); $.post(action, formData, function(data){ productDiv.replaceWith(data); var form = data.find('form'); handleForm( form ); }); return false; }); } handleForm('.edit_clothing_product')

Si vous vous sentez paresseux, attachez .live('click', function() {} ); sur votre bouton d’envoi, mais si elle est soumise sans clic, cela ne fonctionnera pas, donc elle aura ses inconvénients.

 $('.edit_clothing_product #submitButton').live('click', function(){ var form = $(this).closest('form'); var productDiv = form.parent(); var action = $(form).attr('action'); var formData = $(form).serialize(); $.post(action, formData, function(data){ productDiv.replaceWith(data); }); return false; });

Vous pourrez peut-être aussi utiliser liveQuery mais je ne l’ai jamais vraiment utilisé.

Meder m’a dirigé dans la bonne direction, merci!

Une chose que j’ai oublié de mentionner est que j’avais plusieurs divs de produit sur une page, ce qui voulait dire que je devais invoquer la fonction pour chacun.

De plus, je n’ai pas pu rattacher l’événement submit directement au formulaire que je viens d’insérer, mais j’ai pu le rattacher à tous les formulaires de produit. Cela fonctionne, mais semble un peu maladroit, laissez-moi savoir si je ne devrais pas le faire de cette façon.

Voici le jquery final

 function handleForm( el ) { $(el).submit(function(){ var productDiv = $(el).parent(); var action = $(el).attr('action'); var formData = $(el).serialize(); $.post(action, formData, function(data){ productDiv.replaceWith(data) $('.edit_clothing_product').each(function(){ handleForm(this); }); }); return false; }); } $('.edit_clothing_product').each(function(){ handleForm(this); });