Tengo un div con algunos elementos.
<div> <input value="" id="MyElement" type="text"> </div>agregué a mi div el addEventListener como
document.getElementById("MyDiv").addEventListener('change', function (event) { alert(event) var elem = event.target; });funciona bien si cambio los valores por teclado. pero, cuando cambio un valor de JS, no pasa nada.
por ejemplo
function test_1() { tmp = document.getElementById("MyElement") tmp.value = "new value" }¿Qué tengo que hacer para disparar mi OnChange?
ok, lo resolvi con
document.getElementById("MyDiv").dispatchEvent(new Event("change"));como sugiere "Sebastian Simon" ¡gracias!
Puede usar dispatchEvent o fireEvent según sea necesario.
Consulte el enlace para obtener más detalles.
Actualizar
Verifique el fragmento a continuación para ver la muestra de trabajo
document.getElementById("MyDiv").addEventListener('change', function (event) { alert(event) var elem = event.target; }); document.getElementById("myInput").addEventListener('change', function (event) { alert(event) var elem = event.target; }); function fnc() { document.getElementById("myInput").value = "New"; var event = new Event('change'); document.getElementById("myInput").dispatchEvent(event); document.getElementById("MyDiv").value = "Somethinig"; } <div id="MyDiv"> hi </div> <input type="text" id="myInput" placeholder="Text" /> <button onclick="fnc()">Click to fire event</button>ok, lo resolvi con
function test_1() { document.getElementById("MyDiv").dispatchEvent(new Event("change")); }como sugiere "Sebastian Simon" ¡gracias!
entonces, para completar, el problema era aplicar Select2 en el menú desplegable. Select2 no dispara Onchange nativo, pero dispara su. eso significa que "addEventListener" no se activará cuando su menú desplegable cambie el valor. para hacer eso, creé en su evento un cuadro de texto, lo agregué, disparé el cuadro de texto Onchange y luego lo eliminé.
por ejemplo:
$('.js-example-basic-single').select2({dropdownAutoWidth : true}); $('.js-example-basic-single').on('change', function (e) { tmp_div = document.createElement("input"); e.target.appendChild(tmp_div) tmp_div.dispatchEvent(new Event("change")) e.target.removeChild(tmp_div) }); <div> <input value="" id="MyElement" type="text"> <select id="cmb_UM1" class="js-example-basic-single select2-hidden-accessible" data-select2-id="select2-data-ctl00_Content_cmb_UM1"> <option selected="selected" value="" title="" data-select2-id="select2-data-2-vplr"></option> <option value=" 1001171997" title=" 1001171997" data-select2-id="select2-data-12-gcgl"> 1001171997</option> </select> </div>También puede intentar recuperar la primera función (usada para alerta) al ingresar valores con diferentes botones.
O puede crear otra alerta cuando se hace clic en el botón para ingresar valores
document.getElementById("MyElement").addEventListener('change', test_2) function test_2() { alert(event) var elem = event.target; }; document.getElementById("MyDiv").addEventListener('click', test_1) function test_1() { tmp = document.getElementById("MyElement"); tmp.value = "new value"; test_2(); } <div> <input value="" id="MyElement" type="text"> <button id="MyDiv">Try me</button> </div>