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()会触发，但jQuery change不会触发？

change和onchange之间究竟有什么区别？

Answer 1

这是因为您没有确保在绑定<select>事件之前在dom中加载change，请检查此fiddle

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

此外，如果您以编程方式设置值，则还需要以编程方式触发change（）事件，请检查here和here

document

Answer 2

$("#test123").val("Candy")未触发onchange事件，请参阅http://jsfiddle.net/j58s9ngv，http://jsfiddle.net/j58s9ngv/1

设置.change()以触发value事件

后，尝试拨打onchange

＆＃13;

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

＆＃13;

Answer 3

为什么testOnchange（）会触发，但jQuery不会改变？

这是因为.change是DOM api中定义的事件，但jQuery来自$("#test123").val("Candy")的事件对象。

因此，虽然当您使用jQuery代码jQuery应用更改事件时，它会在DOM中导致更改事件，因此仅触发本机事件。

如果你想要触发change的{{1}}事件，那么你需要手动触发它，如另一个答案所示。 $("#test123").val("Candy").change();

Answer 4

{{1}}不会触发onchange事件。我认为两者都一样。

jQuery更改和HTML更改有什么区别？

4 个答案: