Basic Javascript / jQuery Works jFiddle, but Not my Browser

Question

I am not new to programming but I am new to Javascript and jQuery.

In my attempts to write the most basic thing, I wrote the below.

If I copy the jQuery include + my javascript and the HTML to jsFiddle, it works. When you select something on the dropdown you get the alert box.

But opening the .html file in my browser, it does not work. You can change the selection all day long and nothing happens.

I feel like this is the most basic thing but I haven't been able to figure it out. What dumb beginner mistake am I making? Javascript is client-side, so it should work I would think. I am using Chrome if it matters but same result in IE. Javascript is enabled in both.

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $('#selections').change(function() {
            alert('Test');
        });
    </script>
</head>

<body>

    <select id="selections">
        <option>Options...</option>
        <option value="zero">zero</option>
        <option value="one">one</option>
    </select>

</body>

</html>

move script to end of body – gu mingfeng Jun 12 '17 at 04:41 — gu mingfeng, Jun 12 '17 at 04:41
jsFiddle that works fine: https://jsfiddle.net/5s0tzgzz/ – Ben Jun 12 '17 at 04:43 — Ben, Jun 12 '17 at 04:43

score 1 · Accepted Answer · answered Jun 12 '17 at 04:42

1

You have to put your script inside a $(document).ready() function. In JQuery, this ensures that all the events are being attached after the elements of the page has been loaded. Please see revised code below:

$(document).ready(function() {
    $('#selections').change(function() {
        alert('Test');
    });
});

answered Jun 12 '17 at 04:42

Thomas James Tiam-Lee

691
3
9

Should jQuery at the bottom of the page, just before
, be wrapped in $(document).ready() still? Or best practice to do so anyway? Also is it best practice to put it just before for performance?
– Ben Jun 12 '17 at 04:50
Not necessarily. As long as you wrap it around $(document).ready(), it doesn't matter if the script is at the top or bottom. However, most sites put it at the bottom as a best practice so that it does not delay the loading of the other visible elements of the page. – Thomas James Tiam-Lee Jun 12 '17 at 04:51

score 0 · Answer 2 · answered Jun 12 '17 at 04:40

0

place script tag before closing tag of body, it doesn't work, because you are binding on element before it is rendered "#selections".

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>

    <select id="selections">
        <option>Options...</option>
        <option value="zero">zero</option>
        <option value="one">one</option>
    </select>


    <script>
        $('#selections').change(function() {
            alert('Test');
        });
    </script>
</body>

or if you need it to be in head, wrap it within $(document).ready, like this,

$(document).ready(function(){
    $('#selections').change(function() {
            alert('Test');
        });
});

answered Jun 12 '17 at 04:40

Talha Abrar

880
8
22

Thanks! Should jQuery be wrapped in $(document).ready() either way as best practice, as Thomas suggests? Is the bottom of the page option a performance best practice? – Ben Jun 12 '17 at 04:49
Best practice would be to place it within a separate file and attach it at the end, and about $(document).ready, usual practice is to wrap code with it, just to be safe, but the actual methodology is if you are declaring it in head, or working with dynamic elements wrap it within document.ready, else no need. – Talha Abrar Jun 12 '17 at 04:55

Basic Javascript / jQuery Works jFiddle, but Not my Browser

2 Answers2