Question

I’ve hit this problem a few times, and I’ve always just found a work around, but this time that would probably be impossible.

The problem is this. I have a form inside a DIV, and I submit the form using jQuery AJAX and then reload the form with the new data added (eg a list of items, with a form to add new items to the list). The items are also added to a MySQL database. This works fine, however once the page is reloaded the form no longer passes the data to the script.

I assume it is something to do with the form being reloaded too and not being linked to the javascript function (or something like that). I’ve solved it previously by moving the form to outside the reload DIV, which does work, but this time it was impractical, and my forms are buttons which delete list items within the DIV.

I was about to try using links to submit a hidden form, but I thought before I resort to that I may as well use this as a chance to learn.

So my question is, what have I been doing wrong and how can I solve it? Thanks 🙂

Sparkles*

Answer 1

Where you handle the submit now like this:

$("#something").submit(function() { .... });

Use .live() instead, like this:

$("#something").live("submit", function() { .... });

When you do $("selector").submit(...) it binds a handler to the submit event of the elements it found then (not the ones added later, even if they match the selector). .live() works differently, listening for the event to bubble up do document…and so it works on future elements as well.