What is the difference between jQuery change and onchange of HTML?

Question

I have the following HTML code :

<select name="test123" id="test123" onchange="testOnchange()">
  <option>Chocolate</option>
  <option>Candy</option>
  <option>Taffy</option>
  <option>Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<script>
$( "#test123" ).change(function() {
    console.log("change");
  });
function testOnchange() {
    console.log("onchange");
}
</script>

If I use JS to set a value for the select like this:

$("#test123").val("Candy");

why does testOnchange() trigger, but jQuery change doesn't?

What exactly is the difference between change and onchange?

score 8 · Accepted Answer · edited May 23 '17 at 11:58

8

It is because you didn't ensured that <select> is loaded in dom before binding the change event, check this fiddle

and check this fiddle again when these scripts were wrapped inside onload event of the document.

Also, if you are setting the value programmatically, you need to trigger the change() event programmatically as well, check here and here

$( document ).ready( function(){
    $( "#test123" ).change(function () {
        console.log("change");
    });
});

function testOnchange(){
    console.log("onchange")
}

edited May 23 '17 at 11:58

Community

1
1

answered Dec 08 '15 at 08:19

gurvinder372

66,980
10
72
94

As the script is below element, so the element is available before the event bindind happens, so this doesn't need the doc ready wrapper, although having a doc ready wrapper is best practice. – Jai Dec 08 '15 at 08:24
@Jai Assuming you are referring to guest271314's answer. In that case the script's positioning will matter which in itself may not be ideal. – gurvinder372 Dec 08 '15 at 08:27
i saw your answer that's why i need to tell you that, doc ready doesn't matter if you put your code below at closing of document and infact your answer doesn't answer the question clearly. – Jai Dec 08 '15 at 08:28
@Jai "infact your answer doesn't answer the question clearly", Is it? Infact I have explained why questioner's code is not giving him the results he/she is expecting. "Why does testOnchage()trigger, but jquery change not trigger?" – gurvinder372 Dec 08 '15 at 08:31
`$("#test123").val("Candy")` if the value change is done this way. Is it there in your code. – Jai Dec 08 '15 at 08:33
@Jai got your point. Updating my answer to address this. Thanks – gurvinder372 Dec 08 '15 at 08:39

score 7 · Answer 2 · answered Dec 08 '15 at 08:37

why does testOnchange() trigger, but jQuery change not?

This is because onchange is an event defined in DOM api but .change is from jQuery's event object.

So, although when you apply a change event with jQuery code $("#test123").val("Candy") it causes a change event in DOM so the native one is fired only.

In case if you want to trigger the jQuery's change event too, then you need to trigger it manually as the other answer suggested. $("#test123").val("Candy").change();

Do you mean `$("#test123").val("Candy")` will trigger `onchange` event and execute `testOnchange` ? — Rayon, Dec 08 '15 at 09:11

guest271314 · Answer 3 · 2015-12-08T08:31:55.920

4

$("#test123").val("Candy") does not trigger onchange event see, http://jsfiddle.net/j58s9ngv , http://jsfiddle.net/j58s9ngv/1

Try calling .change() after setting value to trigger onchange event

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<select name="test123" id="test123" onchange="testOnchange()">
  <option>Chocolate</option>
  <option>Candy</option>
  <option>Taffy</option>
  <option>Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<script>
$( "#test123" ).change(function () {
    console.log("change");
  });
function testOnchange(){
    console.log("onchange")
}
  $("#test123").val("Candy").change()
</script>

edited Dec 08 '15 at 08:31

answered Dec 08 '15 at 08:19

guest271314

1
15
104
177

`$("#test123").val("Candy")` this could cause in change event, so why bother to trigger the change event. – Jai Dec 08 '15 at 08:26
@Jai _"`$("#test123").val("Candy")` this could cause in change event, so why bother to trigger the change event."_ `$("#test123").val("Candy")` does not trigger `onchange` event see, http://jsfiddle.net/j58s9ngv/ , http://jsfiddle.net/j58s9ngv/1/ – guest271314 Dec 08 '15 at 08:29
That is what i want to mention you should add it in your answer. – Jai Dec 08 '15 at 08:30

score 4 · Answer 4 · answered Dec 16 '15 at 05:25

4

$("#test123").val("Candy") does not trigger onchange event. I think both same.

answered Dec 16 '15 at 05:25

users123212321i

156
5

What is the difference between jQuery change and onchange of HTML?

4 Answers4