5

Quando click em "colocar", o campo é preenchido com a informação "mudou", mas, quando isso acontece, o Próximo change não identifica essa mudança.

Na prática isso não funciona, como posso fazer isso funcionar?

HTML

<button id="botao">Colocar</button>
<input id="campo">

jQuery

$('#botao').click(function(){
    $('#campo').val('mudou');
})

$('#campo').change(function() {
    alert('mudou mesmo');
});

http://jsfiddle.net/yLcap/2/

2
  • 1
    Quando você muda o valor programaticamente, o evento change não roda. E você está usando o seletor errado (#input em vez de #campo). Por que não fazer seja lá o que precisa logo após atribuir o valor?
    – bfavaretto
    Commented 10/02/2014 às 13:52
  • Verdade cometi esse erro, mas mesmo colocando o nome correto campo O Problema ainda continar Commented 10/02/2014 às 13:55

4 Respostas 4

8

Como já mencionado, alterar o valor via Javascript não dispara o evento change.

Uma alternativa é executar o código desejado juntamente com a alteração do valor ao invés de confiar no evento.

Outra abordagem é executar manualmente o evento após a mudança usando o método change() ou trigger("change").

Exemplo:

$('#botao').click(function(){
    $('#campo').val('mudou');
    $('#campo').change(); // ou trigger("change")
})

$('#reset').click(function(){
    $('#campo').val('');
    $('#campo').change(); // ou trigger("change")
})

$('input').change(function() {
    alert('mudou mesmo');
});

Veja o jsfiddle com change() ou com trigger().

Nota: Cuidado ao invocar métodos que invocam eventos dentro de métodos que são chamados por eventos para não acabar em um loop infinito.

4

O método change apenas ouve o evento onchange do browser, ele não é ativado quando o valor muda programaticamente. Uma alternativa seria você invocar o change manualmente através do comando trigger:

$('#botao').click(function(){
    $('#campo').val('mudou').trigger('change');
})

$('#campo').change(function() { // Nota: o id é "campo", não "input"
    alert('mudou mesmo');
});

Exemplo. Essa é uma dúvida comum, mas infelizmente não existe nenhum meio de se colocar um ouvinte que detecte mudanças à propriedade value do input feitas programaticamente. O mais próximo disso que pude encontrar é o DOMAttrModified, mas além dele não ser suportado pela maioria dos navegadores, ele apenas é disparado em alterações nos atributos, e value é uma propriedade.

1

Você não tem um input com o id="input". Ou você corrige igual o @bfavaretto falou, ou no propio click do botão você pode chamar o alerta do input. Exemplo:

$('#botao').click(function(){
    $('#campo').val('mudou');
    if($('#campo').val()=='mudou') 
           alert('mudou mesmo');
})
1
  • 1
    Esse método precisa esta separado. Na minha situação atual. Commented 10/02/2014 às 14:00
0

Formulário:

input type="text" name="campo" id="campo" value="1234"   
input type="text" name="valor" id="valor" value="" 
input type="submit" id="gravar" value="gravar alteracao"  

Script:

$(document).ready(function(){  
   $('#campo').focus();  
   $('#gravar').css('display','none');  
   $('#campo').blur(function(){  
      $('this').val().trigger('change');  
   })  

   $('#campo').change(function() {   
      alert('o valor de campo foi alterado');  
      $('#gravar').css('display','block');  
   });  
});  

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .