jQuery change() and bind("change") do not work

javascript jquery html ajax dom

28,156

Solution 1

Your code does not work because you try to work with dom when it is not built yet. Use this:

$(document).ready(function () {
  // your code
});

Then your code will run when dom is already built.

Solution 2

This:

<script>
  $('#target').change(function() {
    alert('Changed');
  });
</script>

Ought to be this:

<script>
  $(function () {
    $('#target').change(function() {
      alert('Changed');
    });
  });
</script>

Meaning you are executing your bindings before the document is ready.

Solution 3

use it like this

$(document).ready(function () {
   $('#target').change(function() {
     alert('Changed');
   });
});

Solution 4

You need to wrap your jquery code inside document ready event

View more solutions

28,156

Author by

Zeeshan

I am an IT professional who loves to have a taste of everything, be it developer, system administration, DevOps or DBA. Recently I have been focusing on Ruby and automating cloud operations.

Updated on July 09, 2022

Comments

Zeeshan almost 2 years
This question has already been asked but I am stuck with the most basic level of it. I haven't added anything to my html except a select tag and trying to catch the change event by jquery. Here is my code:
```
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
  $('#target').bind("change", function{
    alert('Changed');
  });
</script>
</head>
<body>
<form>
  <select id="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
</body>
```
Even the change() function does not work.
```
<script>
  $('#target').change(function() {
    alert('Changed');
  });
</script>
```
Please help me figure out where I am doing wrong. In one of the similar problems on Stackoverflow, I got http://jsfiddle.net/78x9Q/4/ as an answer. But even an exact copy paste of that code is not working for me.

P.S.: jQuery is loading as I tested it and found working using this:
```
<script>
$(function() {
  alert('Changed');
});
</script>
```
Zeeshan over 11 years

That is the clarification I exactly needed. Thanks much.
Zeeshan over 11 years

Thank you, it worked nicely, I just missed the fact that Speransky has mentioned in his reply.