В чем разница между изменением jQuery и заменой HTML?

У меня есть следующий код 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?

Ответ 1

Это связано с тем, что вы не обеспечивали загрузку <select> в dom перед связыванием события change, проверьте это fiddle

и снова проверьте скрипку, когда эти скрипты были обернуты внутри onload события document.

Кроме того, если вы программно задаете значение, вам нужно также вызвать событие change() программно, проверьте здесь и здесь

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

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

Ответ 2

$("#test123").val("Candy") не запускает событие onchange, см. http://jsfiddle.net/j58s9ngv, http://jsfiddle.net/j58s9ngv/1

Попробуйте вызвать .change() после установки value для запуска события 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>

Ответ 3

почему триггер testOnchange(), но изменение jQuery нет?

Это связано с тем, что onchange - это событие, определенное в DOM api, но .change - из объекта события jQuery.

Итак, хотя, когда вы применяете событие изменения с кодом jQuery $("#test123").val("Candy"), оно вызывает событие изменения в DOM, поэтому только исходный.

Если вы хотите вызвать событие jQuery change, то вам нужно запустить его вручную, как и предлагаемый другой ответ. $("#test123").val("Candy").change();

Ответ 4

$("#test123").val("Candy") не вызывает событие onchange. Я думаю, что оба.