javascript - ocultar - ¿Cómo desencadenar un evento de cambio de JQuery cuando el valor de entrada cambió programáticamente?

onchange jquery select

Question

Quiero activar el evento de change JQuery cuando el texto de entrada se modifica mediante programación, por ejemplo, como este:

$("input").change(function(){
console.log("Input text changed!");
});
$("input").val("A");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=''text'' />

Pero no funciona. ¿Cómo puedo hacer este trabajo?

Answer 1

el evento de cambio solo se activa cuando el usuario escribe en la entrada y luego pierde el foco.

Debe activar el evento manualmente utilizando change() o trigger(''change'')

$("input").change(function() {
console.log("Input text changed!");
});
$("input").val("A").change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type=''text'' />

Answer 2

El controlador de eventos .change() comporta como un envío de formulario, básicamente cuando el valor cambia al enviar, la consola se registrará. Para comportarse en la entrada de texto, desearía utilizar la entrada, como a continuación:

$("input").on(''input'', function(){
console.log("Input text changed!");
});
$("input").val("A");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=''text'' />

Answer 3

El evento de cambio de jquery solo funciona cuando el usuario escribe en la entrada y luego pierde el enfoque. Por lo tanto, puede usar la siguiente solución para hacerlo: Digamos que tiene un botón que hace clic en el que da como resultado un cambio en el valor de la entrada. (esto podría ser cualquier otra cosa también en lugar de un botón)

var original_value = $(''input'').val();
$(''button'').click(function(){
var new_value = $(''input'').val();
if(original_value != new_value ){
//do something
}
//now set the original value to changed value (in case this is going to change again programatically)
original_value = new_value;
})

Answer 4

Lo que debe hacer es activar el evento de change después de haber configurado el texto. Así que puedes crear una función para hacerlo y no tendrás que repetirla cada vez que necesites actualizar el texto, de esta manera:

function changeTextProgrammatically(value) {
$("input").val( value );
$("input").trigger( ''change'' ); // Triggers the change event
}
changeTextProgrammatically( "A" );

He actualizado el fiddle ,

Answer 5

Puedes usar el evento DOMSubtreeModified:

$(''input'').bind(''DOMSubtreeModified'',function(){...})

Si desea disparar cambios de usuario y código:

$(''input'').bind(''input DOMSubtreeModified'',function(){...})

Este evento está marcado como obsoleto y, a veces, bastante tiempo de CPU, pero también puede ser muy eficiente cuando se usa con cuidado ...