Jquery change not working when selecting

Why is this not working? I'm not sure what I'm doing wrong. I am sure jquery is working on the page.

Can anyone help me? thanks in advance

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/derweco.css"/>
    <script type="text/javascript" src="scripts/jquery-2.1.0.js"></script>
    <script type="text/javascript">

        $('#numbers').change(function(){
            alert('other value');
        });
    </script>
</head>
<body>
<div id="home">
    <select id="numbers">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>
</body>
</html>
+4
source share
3 answers

You need to wrap your code inside a DOM ready handler or a shorter form to make sure all your DOM elements are loaded correctly before executing jQuery code. $(document).ready(function() {...});$(function() {...});

$(function() {
    $('#numbers').change(function(){
        alert('other value');
    });
});

Demo Screenshot

+6
source

when you want to register an event like onchange you have to put it inside

    $(documet).ready(function(){
$('#numbers').change(function(){
        alert('other value');
    });
});

note that $ (documet) .ready () is equal to $ () as Felix pointed out!

, , Javascript, :

window.onload=function(){};
+3
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/derweco.css"/>
    <script type="text/javascript" src="scripts/jquery-2.1.0.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){ //Added DOM ready 
        $('#numbers').change(function(){
            alert('other value');
        });
     });
    </script>
</head>
<body>
<div id="home">
    <select id="numbers">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>
</body>
</html>
+2

Source: https://habr.com/ru/post/1533056/


All Articles