val () não aciona change () em jQuery

Estou tentando acionar o evento de change em uma checkbox de texto quando altero seu valor com um botão, mas não funciona. Verifique este violino .

Se você digitar algo nas checkboxs de texto e clicar em algum outro lugar, a change será acionada. No entanto, se você clicar no botão, o valor da checkbox de texto será alterado, mas a change não será acionada. Por quê?

   

onchange só triggers quando o usuário digita na input e, em seguida, a input perde o foco.

Você pode chamar manualmente o evento onchange usando depois de definir o valor:

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

Alternativamente, você pode acionar o evento usando:

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

De excelente sugestão do redsquare, isso funciona muito bem:

 $.fn.changeVal = function (v) { return this.val(v).trigger("change"); } $("#my-input").changeVal("Tyrannosaurus Rex"); 

Você pode facilmente replace a function val para acionar a mudança, substituindo-a por um proxy para a function val original.

Basta adicionar este código em algum lugar no seu documento (depois de carregar o 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); 

Um exemplo de trabalho: aqui

(Observe que isso sempre acionará a change quando val(new_val) for chamado, mesmo que o valor não tenha realmente mudado.)

Se você quiser acionar a mudança SOMENTE quando o valor realmente for alterado, 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); 

Exemplo ao vivo para isso: http://jsfiddle.net/5fSmx/1/

Você precisa encadear o método assim:

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

Não, você pode precisar ativá-lo manualmente depois de definir o valor:

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

ou:

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

Parece que os events não estão borbulhando. Tente isto:

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

Eu espero que isso ajude.

Eu tentei apenas um simples $("#mytext").trigger('change') sem salvar o valor antigo, e o .change acionado mesmo se o valor não for alterado. É por isso que eu salvei o valor anterior e chamei $("#mytext").trigger('change') somente se ele mudar.

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

O evento de change é enviado para um elemento quando seu valor é alterado. Este evento é limitado a elementos , checkboxs e elementos . Para checkboxs de seleção, checkboxs de seleção e botões de opção, o evento é acionado imediatamente quando o usuário faz uma seleção com o mouse, mas, para os outros tipos de elemento, o evento é adiado até que o elemento perca o foco.