jQuery更改和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()触发,但jQuery change不会？

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

Answer 1

这是因为你没有确保<select>在绑定change事件之前在dom中加载,请检查这个小提琴

当这些脚本被包装在事件中时,再次检查这个小提琴.onloaddocument

此外,如果以编程方式设置值,则还需要以编程方式触发change()事件,请在此处和此处进行检查

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

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

Answer 2

为什么 testOnchange() 会触发，而 jQuery 不会改变？

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

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

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