web-dev-qa-db-ja.com

jQueryの変更とHTMLのonchangeの違いは何ですか？

私は次の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の違いは正確には何ですか？

javascriptjqueryhtmlonchange
13
dieuvn3b

それはあなたがそれを保証しなかったからです<select>はchangeイベントをバインドする前に、domにロードされます。これを確認してください fiddle

そして、これをチェックしてください もう一度いじる これらのスクリプトがonloadのdocumentイベント内にラップされたとき。

また、プログラムで値を設定する場合は、change（）イベントもプログラムでトリガーする必要があります。 ここ および ここ を確認してください。

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

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

$("#test123").val("Candy")はonchangeイベントをトリガーしません。 http://jsfiddle.net/j58s9ngv 、 http://jsfiddle.net/j58s9ngv/ 1

valueイベントをトリガーするようにonchangeを設定した後、.change()を呼び出してみてください

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

testOnchange（）がトリガーされるのに、jQueryは変更されないのはなぜですか？

これは、onchangeがDOMAPIで定義されたイベントであるのに対し、_.change_はjQueryのイベントオブジェクトからのものであるためです。

したがって、jQueryコード$("#test123").val("Candy")を使用して変更イベントを適用すると、DOMで変更イベントが発生するため、ネイティブイベントのみが発生します。

jQueryのchangeイベントもトリガーする場合は、他の回答が示すように手動でトリガーする必要があります。 $("#test123").val("Candy").change();

4
Jai

$("#test123").val("Candy")はonchangeイベントをトリガーしません。どちらも同じだと思います。

4
users123212321i