Question

I have a JQuery Mobile Multi-Page layout and I want to trigger a function when a select menu on my site is changed.

Currently when the menu is changed three events fire.

I have put together an example that should show you what i’m facing.

1. From the main menu click Web Settings
2. Change the Theme option on the page
   Notice the three alerts

Here is my code to register the event

$(document).bind("pagecreate", function() {
    $("#settings-theme").bind("change", function(event) {
        alert(event.target);
    });
});

Things I have tried:

• Changing the data-native-menu="false" to true removed one of the event firings.
• Removed all other pages except web settings and that also reduced the number of events firing to two.
• In JSFiddle, Framework Options > Head (nowrap) changed to DomReady also removed a event fire.

---

Update
It appears that pagecreate is fired every time a page is ‘first-viewed’ as well as twice when the homepage is loaded.
So by the time the settings page is loaded the event has been binded three times.. still no solution.

Answer 1

$(document).bind("ready", function() {
    $("#settings-theme").live("change", function() {
        alert("changed");
    });
});

or

$(document).bind("ready", function() {
    $("#pg-settings").delegate("#settings-theme", "change", function() {
        alert("changed");
    });
});