Phonegap - jquery Mobile : button click event not able catch in android

Question

I am developing a sample app using phonegap with the jQuery mobile plugin for android. I created a page, main.html. From main.html, I am able to catch the event. Once button is pressed in the main page, I change the contents using( $.mobile.changePage("path") ) function to signup.html. I have button in signup.html but when I click that button click event does not get fired. I have loaded all the js file in signup.html as well. what am doing wrong? Please guide me.

Clarification: Should I keep only one html (main.html ) and through that I have to do page navigation.?

Answer 1

In case your second page javascript is placed inside a HEAD content

If I understood you correctly, you are using ajax to load this page into the DOM? If this is true then I understand your problem. You see, when ajax is used for page loading only BODY content is loaded into the DOM.

You can fix your problem if you initialize your second html page javascript inside a first HTML file or move your SCRIPT block inside a second HTML BODY content.

Also, I have described this problem in my other ARTICLE with more details and few examples, or it can be found HERE.

In case you have several buttons with a same id

This could also be a little different problem. You see, if you have 2 buttons with a same id, they are both inside a DOM structure. If you try to bind a click event on a second page button, that same event will be bound to the button on a first page. Because they have a same id jQuery will bound an event to the first button (with that id) found in the DOM.

To fix this problem you need to use a jQM constructor called active page. One more warning, next code example will work only in a page events initialized after a pageinit event, for example pagebeforeshow or pageshow events:

$(document).on('pagebeforeshow', '#yourPageID', function(){     
    // Registering button click  
    $(document).on('click', $.mobile.activePage.find('#myButtonID'), function(){
        // Do something
    });
});

This line of code:

$.mobile.activePage.find('#myButtonID')

Will only get button '#myButtonID' found in a current active page, no matter how many other buttons with a same id exist inside the DOM.

Answer to the last question

About your last questions. It doesn't matter which template structure you use (1 HTML with multiple pages or multiple HTML's), you just need to worry about things I mentioned before.

Answer 2

Did you wrap your code inside following snippet?

$(document).on('pagebeforeshow', '#yourPageID', function(){     
    // Registering button click  
    $('#myButtonID').bind('click',function(){
       $.mobile.changePage('yourfile.html');
    });
});

if you just wrap it inside your <script></script> tag the event will not fire.

Did you get any error in the console? Check DDMS for it.