JavaScript works in JSFiddle but not in html file on a browser

Question

I'm trying hook up a checkbox check event with additional events (such as a dialog display). However, I can't seem to get the click event working when I'm testing my html file in a browser. It does work in JSFiddle, though, which is very strange.

http://jsfiddle.net/rEgAX/1/

My HTML:

<label><input type="checkbox" name="checkbox-0" id="myCheckbox" /> Completed </label>

My JavaScript:

var countChecked = function() {
    if ($("#myCheckbox").is(":checked"))
    {
        alert('checked!');
    }
};

$( "input[type=checkbox]" ).on( "click", countChecked );

The html file that I wrote:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script>
            // On clicking of the completed checkbox, we want to pop up a dialog for confirmation.
            var checkboxClicked = function() {
                if ($("#myCheckbox").is(":checked")) {
                    alert('checked!');
                        console.log('checked!')
                    }
                };

            $( "input[type=checkbox]" ).on( "click", checkboxClicked );

        </script>
    </head>
    <body>
        <label><input type="checkbox" name="checkbox-0" id="myCheckbox" /> Completed </label>
    </body>
</html>

More details. What browser? Does the console display an error? We don't magically know this!! — Sterling Archer, Aug 15 '13 at 02:06
remove `.ready()` and change `click` with `change`. Checkboxes and radio buttons listen to `change` event. Edit: Demo http://jsfiddle.net/Palestinian/rEgAX/2/ — Omar, Aug 15 '13 at 08:51

score 3 · Accepted Answer · edited May 23 '17 at 12:28

3

You must place your code inside

$(document).ready(function(){
    ...
});

Since your script comes before your checkbox is rendered.

EDIT

You might run unto a problem with my first answer. Thanks to Omar's comment and reference

It should be this way rather than .ready() function:

$(document).on('pageinit') { 
    ...
});

edited May 23 '17 at 12:28

Community

1
1

answered Aug 15 '13 at 02:08

nix

3,262
2
21
36

Works fine now! Learned something new today. :D Thank you! – SpartaSixZero Aug 15 '13 at 02:17
this is totally wrong, I dont know how it got accepted and 3 upvotes. `.ready()` shouldn't be used in jQuery Mobile, why? http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events – Omar Aug 15 '13 at 08:50
@Omar I'm sorry about that. I have not tried jQuery Mobile yet. I did not know that they have that difference. Thanks for that anyway, I learned something new today too. LOL – nix Aug 15 '13 at 10:24
1

change your answer to `$(document).on('pageinit', function () {` and add the link i provided as a reference in addition to this http://api.jquerymobile.com/category/events/ also notify the OP of the changes. thanks and good luck – Omar Aug 15 '13 at 10:26

score 0 · Answer 2 · answered Aug 15 '13 at 02:07

By default, jsFiddle will wrap your code in an load handler.

Try wrapping your code in:

$(window).load(function(){
var countChecked = function() {
    if ($("#myCheckbox").is(":checked"))
    {
        alert('checked!');
    }
};

$( "input[type=checkbox]" ).on( "click", countChecked );
});

JavaScript works in JSFiddle but not in html file on a browser

2 Answers2