Rebinding functions on dynamic content using jQuery and AJAX

Question

I'm in the process of building a back-end admin panel for a site and I'm having an issue with the jQuery and AJAX code is use to build the page.

On load, I bind actions to certain table fields allowing users to add or delete a colour or size. When they submit the form, I empty the table and use AJAX to generate a new one, then put the new table into the form.

Unfortunately, the new form isn't (as I expected) affected by the $(document).ready function. I am wondering if there's a way of either re-calling the document.ready function to bind the actions to the new elements in the page or alternatively to call a jQuery function without going through the document.ready function.

I could rewrite the jQuery function in vanilla javascript and call it that way but I far prefer to reuse the jQuery code if at all possible.

I've found some stuff about how to do it using ASP.NET and UpdatePanels but this site is in PHP and it uses a basic AJAX query to insert into the database, refetch the results then build up the table of results.

Any ideas?

Answer 1

Have you tried using live events? This is for 1.3 only.

For previous versions you can use the live query plugin. With this you can run match and unmatch listeners (run code when a match occurs). You can also force the evaluation of bindings using the livequery.run method.

Answer 2

live events seem the best answer; but if not, you should simplify the $(document).ready() function to make it call an initialization function. later on, after loading your AJAX content, you just call it again.