val() no activa el cambio() en jQuery

tooltip html

Question

Estoy intentando activar el evento de change en un cuadro de texto cuando cambio su valor con un botón, pero no funciona. Revisa este violín .

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

Answer 1

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");

Answer 2

Desde .change() :

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

Answer 3

Necesitas encadenar el método así:

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

Answer 4

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

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

o:

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

Answer 5

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 $("#mytext").trigger(''change'') simple $("#mytext").trigger(''change'') sin guardar el valor antiguo, y el .change dispara incluso si el valor no cambia. Por eso guardé el valor anterior y llamé a $("#mytext").trigger(''change'') solo si cambia.

Answer 6

Puede anular fácilmente la función val para desencadenar el cambio reemplazándolo con un proxy a la función val original.

simplemente agrega este código en algún lugar de tu 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: here

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

Si desea activar el cambio SOLAMENTE 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/

Answer 7

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

Puede llamar manualmente al evento onchange después de configurar el valor:

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

Alternativamente, puede trigger el evento usando:

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