jQuery change 和 onchange of HTML 有什么区别？

Question

我有以下 HTML 代码：

<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>

如果我使用 JS 为 select 设置一个值，如下所示：

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

为什么testOnchange()触发，而jQuerychange不触发？

change和onchange到底有什么区别？

Answer 1

$("#test123").val("Candy")不触发onchange事件看，http://jsfiddle.net/j58s9ngv , http://jsfiddle.net/j58s9ngv/1

设置value后尝试调用.change()触发onchange事件

<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>

Answer 2

是因为你在绑定change事件之前没有确保<select>在dom中加载，勾选这个fiddle

并在这些脚本包含在 document 的 onload 事件中时检查此 fiddle again。

此外，如果您以编程方式设置值，则还需要以编程方式触发 change() 事件，检查 here and here

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

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

Answer 3

为什么 testOnchange() 触发了，但 jQuery 没有改变？

这是因为 onchange 是 DOM api 中定义的事件，但 .change 来自 jQuery 的事件对象。

因此，尽管当您使用 jQuery 代码 $("#test123").val("Candy") 应用更改事件时，它会导致 DOM 中的更改事件，因此仅触发本机事件。

如果您也想触发 jQuery 的 change 事件，那么您需要按照其他答案的建议手动触发它。 $("#test123").val("Candy").change();

Answer 4

$("#test123").val("Candy") 不触发 onchange 事件。我觉得都一样。

jQuery change 和 onchange of HTML 有什么区别？

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

html

javascript

jquery

onchange