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...
I guess I am a bit confused about your problem. This popup you are talking about, is it created each time the user gets to it?
I guess I just don't understand the process from your description. I would need to see what you are talking about. Can you create a demo on JSfiddle.net? I would try to use classes - the class name can be the same. If it's an issue with re-creating the form, why are you doing that? Just leave the form static and the popup dynamic.
Hey, thanks for your reply. Here's some clarification (I hope).
Imagine you have one page that's dynamically generated by the server based on the query string. Then you have a button on the page that will perform an action. You tie a click event handler to the button. Easy enough.
Now let's move to using jQueryMobile. It loads the first page into the DOM. Ties the event handler to the button. Everything works dandy. Then you go to the same page with a different query string. jQueryMobile correctly determines that it's a new page, and loads it into the DOM without unloading the first page. This is behavior I like, and approve of and would like to keep.
However, when we try to attach the event handler now, we run into my problem. There are two options (I've tried) to attach the event handler.
Use an id attribute of the button "#id". It works fine on the first page, but when we load the next page, we suddenly have two buttons with the same id. Problem! The event handler is tied to the first page's button a second time. This causes the event to be triggered twice for the first page's button (if we navigate back) and not at all for the second page's button.
Use a non-unique attribute of the button "input[type=button]". It works fine on the first page, but when we load the second page, the button event handler is tied to ALL the buttons with that selector. So when we navigate back to the first page, the event is run twice. This is a problem.
So my question is, what is the best practice for making certain I only attach the event handler once to each button? Let me know if I need to make it any clearer.
Not sure what 'best practice' is, but I have two suggestions.
If you can change the code on the server, have it create an id for the button based on the query string (id10, id20, etc). Then you could look at the query string and attach it to the correct id when the page loads.
A second option would be to find the button via the "input[type=button]" and find the one without an id and give it and id based on the query string. Then attach the code to it.