Comment puis-je avoir jquery attacher un comportement à un élément après l'avoir inséré

Question

J'ai un formulaire que je soumets par ajax, et retourne un morceau mis à jour de html qui comprend un formulaire mis à jour que je veux soumettre via jquery.

Le problème que j'ai est que la première fois que je clique sur soumettre l'événement est capturé par jquery et fonctionne très bien. Lorsque j'apporte une autre modification au formulaire sans actualisation, l'événement n'est pas capturé par jquery, mais effectue une demande de publication standard.

Comment puis-je avoir un comportement jquery attach à 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 HTML (réduit) que je renvoie.

<div class="product"> 
    <form action="..." class="edit_clothing_product"> 
     <div class="color_combos"> 
     ...{form fields} 
     </div> 
     <a href=".../add_color_combo" class="add_color_combo">Add Color Combo</a> 
    <input name="commit" type="submit" value="Save" /> 
    </form> 
</div> 

Answer 1

Vous devrez réattacher le gestionnaire d'événements de soumission que vous avez défini car vous remplacez le formulaire. Vous pouvez faire de cette chose entière une fonction appelable afin que vous puissiez l'invoquer plusieurs fois.

Pour autant que je sache, live ne fonctionne pas pour submit - vous pourriez être en mesure de joindre un gestionnaire d'événements click avec live mais ce n'est pas la exacte 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, attacher .live('click', function() {}); à votre bouton soumettre, mais si elle est soumise sans cliquer dessus ne fonctionnera pas si elle a 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 pourriez également être en mesure d'utiliser liveQuery mais je jamais vraiment utilisé que.

Answer 2

Meder m'a indiqué la bonne direction, merci! Une chose que j'ai oublié de mentionner était que j'avais plusieurs divs de produit sur une page, ce qui signifiait que je devais invoquer la fonction pour chacun.

De plus, je n'ai pas été en mesure de rattacher l'événement de soumission directement au formulaire que je viens d'insérer, mais j'ai pu me réinscrire à 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 finale

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); 
});