val() no desencadena el cambio() en jQuery

Question

Estoy intentando activar el evento change en un cuadro de texto cuando cambio su valor con un botón, pero no funciona. Compruebe this fiddle.

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

Answer 1

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

Usted puede llamar manualmente el evento onchange usando después de ajustar el valor:

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

Como alternativa, puede trigger el evento usando:

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

Answer 2

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

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

o:

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

Answer 3

Parece que los eventos no están burbujeando. Pruebe 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 simple viejo $("#mytext").trigger('change') sin guardar el valor anterior, y el .change dispara incluso si el valor no cambió. Es por eso que guardé el valor anterior y llamé al $("#mytext").trigger('change') solo si cambia.

Answer 4

De excelente sugerencia de redsquare, esto funciona muy bien:

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

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

Answer 5

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

sólo tiene que añadir 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: here

(Tenga en cuenta que esto siempre se disparará change cuando val(new_val) se llama incluso si el valor didn 'en realidad cambiado.)

Si desea desencadenar el cambio SÓLO cuando el valor realmente cambió, utilice 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 vivo de que: http://jsfiddle.net/5fSmx/1/

Answer 6

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

El evento change se envía a un elemento cuando su valor cambia.Este evento está limitado a <input> elementos, <textarea> cajas y <select> elementos. Para cuadros de selección, casillas de verificación y botones de opción, el evento se dispara 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 7

Necesitas cadena del método como este: [? Textbox.val jQuery ('xxxx') no causar el cambio al fuego]

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