jQuery code only works on first page load in jQuery Mobile

Question

I have the following code in jQuery Mobile. This code works fine when the page first loads, however if you navigate to this page it does nothing.

$('#dontKnowReg').click(function(){
    if($(this).is(':checked')) { 
            $('#dontKnowRegDetails').slideDown();
    } else {
           $('#dontKnowRegDetails').slideUp();
    }
});

I fixed a similar issue by changing the .click to .live but in this case it means the code doesnt work at all (even if i refresh the page). Thanks

$('#dontKnowReg').live('click', function () {
    if($(this).is(':checked')) { 
            $('#dontKnowRegDetails').slideDown();
    } else {
           $('#dontKnowRegDetails').slideUp();
    }
});

Show us more of your code. We don't know is #dontKnowReg a page, or button ... If I understood you correctly you have 2 pages and some functionality is working in one but not at another? — Gajotres, Nov 27 '12 at 12:51
#dontKnowReg is a checkbox. The first load of code works fine if you start on that page rather than navigate to it, or if you manually refresh. It doenst work if you start on another page and navigate to it. — Evanss, Nov 27 '12 at 12:53
The 2nd load of code was my attempt at a fix. I thought live might solve the issue, but instead it doesnt work at all (if you refresh the page or not). There arn't 2 pages, just the 1 im working on. — Evanss, Nov 27 '12 at 12:54

score 0 · Answer 1 · edited May 23 '17 at 10:24

This should work:

$('#page').live('pagebeforeshow',function(e,data){
    $('#dontKnowReg').unbind();
    $('#dontKnowReg').bind('click', function(e) {
       if($(this).is(':checked')) { 
         $('#dontKnowRegDetails').slideDown();
       } else {
         $('#dontKnowRegDetails').slideUp();
       }
    });
});

Lets say #page is a page where check box can be found (if you have more pages with that checkbox use this: $('#page, #page2, #page3').live('pagebeforeshow'......). Each time page #page is about to be displayed we will bind an event on checkbox (unbind is here to unbind it in case event is already binded, this can be also prevented with Event Filter but I dont have an example here). Hope this helps.

Here's something about Event filter and here's an example why is it necessary in jQm environment.

Your second example should work better in jQM environment, your only problem was when to apply it. If you are using newer version consider using .on( instead of .live(, .bind(, .delegate(

I had to remove the first and last line from your code to get it to work. Possibly because my code is already in dom ready? Thanks — Evanss, Nov 27 '12 at 14:04
Sorry I made a mistake. Your code is having the same issue as mine. — Evanss, Nov 27 '12 at 15:31

score 0 · Answer 2 · answered Nov 27 '12 at 15:43

0

It seems you cant use dom ready with jQuery. Now it works:

//$(document).ready(function() {
$("#mypage").live('pageinit', function() {

http://forum.jquery.com/topic/how-to-use-pageinit

answered Nov 27 '12 at 15:43

Evanss

23,390
94
282
505

jQuery code only works on first page load in jQuery Mobile

2 Answers2