How can I add jquery element behavior to an element after inserting it
I have a form that I submit via ajax and it returns an updated html chunk that includes the updated form I want to submit via jquery.
The problem I am facing is that the first time I click the button, the event is captured by jquery and works fine. When I do another form change without updating, the event is not captured by jquery, but a standard post request is made.
How can I add jquery element behavior to the element after inserting it.
Here is my jquery code.
$('.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;
});
Here is the (HTML) I am returning.
<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>
source to share
You will need to reattach the submit event handler you defined because you are replacing the form. You can make this whole thing a callable function so you can call it multiple times.
live
Doesn't work for as far as I know submit
- you can hook up an event handler click
using live
, but that's not the same as .submit
. I would just define a function like this:
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')
If you're feeling lazy, attach .live('click', function() {} );
to your submit button, but if it is submitted without a click it won't work, so it has its drawbacks.
$('.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;
});
You can also use liveQuery
, but I have never used this.
source to share
Meder pointed me in the right direction, thanks!
One thing I forgot to mention was that I had multiple product sections per page, which meant I had to call a function for each.
Also, I was unable to re-attach the submit event directly to the form I just inserted, but I was able to re-attach all of the product forms. It works, but seems a little awkward, let me know if I don't.
Here's the latest jquery
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);
});
source to share