Question

I have a jQuery Mobile app, that loads pages in via ajax eg page1.html, page2.html etc

On page1.html I have a button:

<a href="page2.html" data-role="button" class="submit">Submit</a>

On page2.html I also have a button

 <a href="page3.html" data-role="button" class="submit">Submit</a>

I have a script file (script.js) referenced on each page inside the body with the following code:

$(document).on('pagechange', function(){
    console.log('new page');
    $('.submit').on('click', function(){
      console.log($('this'));
    });
}

‘new page’ is being written to the console for each page but the click is only being registered on a single page (if I refresh the page it works on that page only)

Any ideas on how to get the click to be fired on each page?

Answer 1

Use the selector param of .on() , in that case you need to bind the event only once, so do it in the document.ready() handler instead, like so:

$(document).ready(function() {
    $(document).on('click', '.submit', function(){
      console.log($('this'));
    });
});