jQuery Forum

So I have a bunch of video records that I load from a database, far too many to put on one page.  In order to take advantage of the history feature of jQueryMobile, I have the pages dynamically generated on the server side with a query string such as "?start=10" or "?start=20".  Users will have the ability to edit the title and description of the video through a handy little popup.

 

Here's the fun part.  I bound the ajax 'save' function to the popup in the $(document).on('pageinit'...  inside the <div data-role="page".  Both ways that I've tried to do this offer unique problems.  If I use an ID of the popup form, it will only execute the form submission on the FIRST page that's loaded, because all the other pages will load and have a duplicate id'd form.  If I use a more lenient selector such as [name=blah] then I end up binding the same event to the form every time a new paginated page is loaded.  So that fires the save event 10 times (or how many ever pages have been loaded).

 

I've got the same functionality for an indeterminate amount of pages, and it'd be nice to have the same IDs, but I don't know how to make the history manager recognize that I've gone to a new page...

 

So what is the correct way to handle something like this?  I'd prefer to keep the history management in use, but if I've got to go to one page with javascript which loads the data and handles pagination, then I guess I'll have to do it that way.