Can't physically select checkbox the first time through

Question

When I test the page and click the checkbox nothing happens. If I go to another page and come back, the checkbox works.

HTML

<fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
       <input id="checkbox8" name="addTo" data-theme="b" type="checkbox">
       <label for="checkbox8"> add to</label>
</fieldset>

JQuery

$("input[type = 'checkbox']").change(function(){
        var item=$(this);
        if(item.is(":checked")){    
            $('#myMenu').append( $('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('test'));
            $('#myMenu').listview('refresh');
        }
        else {
                $( "#myMenu li:last-child" ).remove().closest( "[data-role=listview]" ).listview( "refresh" );  
        }
});

Why is that? I don't want the checkbox to be set initially. The idea is to check the box, the selected object dynamically updates and appears on the listview of another page.

Are you sure your DOM is ready at first load? – A. Wolff May 22 '13 at 14:46 — A. Wolff, May 22 '13 at 14:46
I am...that's why I'm confused – rlegs May 22 '13 at 14:51 — rlegs, May 22 '13 at 14:51

score 2 · Accepted Answer · edited May 23 '17 at 11:50

You need to be sure your page is loaded into the DOM before doing this in the first place. Don't use document ready because it can trigger before jQM page is loaded into the DOM. Instead you should use proper jQuery Mobile page event.

$(document).on('pageinit', '#index', function(){ 
    $(document).on('change','input[type="checkbox"]',function(){
        var item=$(this);
        if(item.is(":checked")){    
            $('#myMenu').append( $('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('test'));
            $('#myMenu').listview('refresh');
        }
        else {
            $( "#myMenu li:last-child" ).remove().closest( "[data-role=listview]" ).listview( "refresh" );  
        }
    });      
});

Where #index is an id of your page. Pageinit event is a jQuery Mobile alternative to classic jQuery document ready state.

Or like in my example you can bind a change event a little bit different:

$(document).on('change','input[type="checkbox"]',function(){

This solution is called delegated binding and it don't care if element is loaded into the DOM or not.

And here's a working example

EDIT

Working HTML example:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
        <script>
            $(document).on('pageinit', '#index', function(){ 
                $(document).on('change','#checkbox8',function(){
                    var item=$(this);
                    if(item.is(":checked")){    
                        alert('Checked');
                    } else {
                        alert('Unchecked');
                    }
                });      
            });     
        </script>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
                    <input id="checkbox8" name="addTo" data-theme="b" type="checkbox"/>
                    <label for="checkbox8"> add to</label>
                </fieldset>
            </div>
        </div>    
    </body>
</html>

thanks Gajotres. The checkbox worked but change function did not. I copied your code and made the page id change. — rlegs, May 22 '13 at 15:06
Then tell me something else. Do you you several HTML pages or one large HTML page with several jQM pages inside? And is your javascript initialized from the HEAD? — Gajotres, May 22 '13 at 15:09
Its one large HTML page. I initialized the js in the head (also tried at the end of the body). — rlegs, May 22 '13 at 15:11
If it is not a problem to you can you mail me your js file and I will fix it for you? Also can you try this: $(document).on('change','#checkbox8',function(){ ? Basically I have replaced input[type = 'checkbox'] with #checkbox8. — Gajotres, May 22 '13 at 15:14
Thanks Gajotres. All that's in my js file is what I posted initially...other than the js files from jquery mobile. — rlegs, May 22 '13 at 15:20
Then my code should work as you can see from my example. It is also a 1 HTML / multiple pages template. I will even create you a working HTML file. — Gajotres, May 22 '13 at 15:27
everything works now. I had to remove $('#myMenu').listview('refresh'); for the is checked. — rlegs, May 22 '13 at 16:06

Can't physically select checkbox the first time through

1 Answers1