Question

Using jQuery Mobile (jquery.mobile-1.0b3.min.js). If i apply a click event to a form, the back button seems to get the click event binding as well. It does this no matter how specifically targeted to an element the selector is. For example:

Using this to set the back button:
Copy code

<div id="pagename-page" data-role="page" data-add-back-btn="true" data-back-btn-theme="b">

And this in a script file:
Copy code

$('#awards-details-page').live('pagecreate', function(event){

    $('#awards-details-page input[name=submit]').bind('vclick', function() {
        console.log('I'm going to be hijacked by the back button.');
    });
});

Clicking on the back button will produce the message in the console when tested in a browser.

Every time you visit the page with the script, it will add another duplicate binding. Attempts to unbind the click event on the pagehide event worked with the targeted element, but back button’s bindings persisted.

Can anyone shed some light on this?

Thank you in advance.

Answer 1

dont use vclick you will ge ghost, they have improved CLICK so just use that
also live is not bind… bind is to an element that exist, live is for all elements that have that shared property, before after and during. you past pages exist so you have a set of binded items now not just one for the page you are on. i would scrap the whole back button element and have your own clickable item, for this you can do your own back code and add attributes like data-backto = “#page1”, you can then control better what happens when a back button is clicked, especially as android phones have there own back button too.