val () no activa el cambio () en jQuery

Estoy tratando de activar el changeevento en un cuadro de texto cuando cambio su valor con un botón, pero no funciona. Mira este violín .

Si escribe algo en los cuadros de texto y hace clic en otro lugar, changese activa. Sin embargo, si hace clic en el botón, el valor del cuadro de texto cambia, pero changeno se activa. ¿Por qué?

onchange solo se activa cuando el usuario escribe en la entrada y luego la entrada pierde el foco.

Puede llamar manualmente al onchangeevento usando después de configurar el valor:

$("#mytext").change(); // someObject.onchange(); in standard JS

Alternativamente, puede activar el evento usando:

$("#mytext").trigger("change");

De la excelente sugerencia de redsquare, esto funciona muy bien:

$.fn.changeVal = function (v) {
    return this.val(v).trigger("change");
}

$("#my-input").changeVal("Tyrannosaurus Rex");

Puede anular fácilmente la valfunción para activar el cambio reemplazándola con un proxy de la valfunción original .

simplemente agregue este código en algún lugar de su documento (después de cargar jQuery)

(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0)
            $(this).change(); // OR with custom event $(this).trigger('value-changed');
        return result;
    };
})(jQuery);

Un ejemplo de trabajo: aquí

(Tenga en cuenta que esto siempre se activará changecuando val(new_val)se llame, incluso si el valor no cambió realmente).

Si desea activar el cambio SOLO cuando el valor realmente cambió, use este:

//This will trigger "change" event when "val(new_val)" called 
//with value different than the current one
(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var prev;
        if(arguments.length>0){
            prev = originalVal.apply(this,[]);
        }
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0 && prev!=originalVal.apply(this,[]))
            $(this).change();  // OR with custom event $(this).trigger('value-changed')
        return result;
    };
})(jQuery);

Ejemplo en vivo para eso: http://jsfiddle.net/5fSmx/1/

Necesita encadenar el método de esta manera:

$('#input').val('test').change();

No, es posible que deba activarlo manualmente después de establecer el valor:

$('#mytext').change();

o:

$('#mytext').trigger('change');

Parece que los eventos no están burbujeando. Prueba esto:

$("#mybutton").click(function(){
  var oldval=$("#mytext").val();
  $("#mytext").val('Changed by button');
  var newval=$("#mytext").val();
  if (newval != oldval) {
    $("#mytext").trigger('change');
  }
});

Espero que esto ayude.

Intenté simplemente un viejo $("#mytext").trigger('change')sin guardar el valor anterior, y los .changeincendios incluso si el valor no cambió. Es por eso que guardé el valor anterior y llamé $("#mytext").trigger('change')solo si cambia.

A partir de febrero de 2019, .addEventListener()actualmente no funciona con jQuery .trigger()o .change(), puede probarlo a continuación usando Chrome o Firefox.

txt.addEventListener('input', function() {
  console.log('not called?');
})
$('#txt').val('test').trigger('input');
$('#txt').trigger('input');
$('#txt').change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">

tienes que usar .dispatchEvent()en su lugar.

txt.addEventListener('input', function() {
  console.log('it works!');
})
$('#txt').val('yes')
txt.dispatchEvent(new Event('input'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="txt">

Desde https://api.jquery.com/change/ :

El changeevento se envía a un elemento cuando su valor cambia. Este evento está limitado a <input>elementos, <textarea>cuadros y <select>elementos. Para cuadros de selección, casillas de verificación y botones de opción, el evento se activa inmediatamente cuando el usuario realiza una selección con el mouse, pero para los otros tipos de elementos, el evento se difiere hasta que el elemento pierde el foco.

Sé que este es un hilo viejo, pero para otros que buscan, las soluciones anteriores tal vez no sean tan buenas como las siguientes, en lugar de verificar changeeventos, verifique los inputeventos.

$("#myInput").on("input", function() {
    // Print entered value in a div box
    $("#result").text($(this).val());
});