jQuery identifying jQuery’s own change

Asked

Viewed 7,550 times

5

When click on "put", the field is filled with the information "changed", but when this happens, the Next change does not identify this change.

In practice it doesn’t work, how can I make it work?

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/

jquery
  • 1

    When you change the value programmatically, the event change does not rotate. And you are using the wrong selector (#input instead of #campo). Why not do whatever you need right after assigning the value?

  • Truth I made this mistake, but even putting the right name campo The problem still continues

4 answers

8


As already mentioned, changing the value via Javascript does not trigger the change event.

An alternative is to run the desired code along with the value change instead of relying on the event.

Another approach is to manually run the event after the change using the method change() or trigger("change").

Example:

$('#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');
});

See the jsfiddle with change() or with trigger().

Note: Beware of invoking methods that invoke events within methods that are called by events to not end up in an infinite loop.

4

The method change just listen to the event onchange browser, it is not activated when the value changes programmatically. An alternative would be you invoke the change manually via the command trigger:

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

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

Example. This is a common question, but unfortunately there is no way to place a listener who detects changes to the property value of input made programmatically. As close as I could find DOMAttrModified, but besides not being supported by most browsers, it is only triggered in changes in attributes, and value is a property.

1

You don’t have a input with the id="input". Either you correct the same as @bfavaretto spoke, or at the very click of the button you can call the input alert. Example:

$('#botao').click(function(){
    $('#campo').val('mudou');
    if($('#campo').val()=='mudou') 
           alert('mudou mesmo');
})
  • 1

    This method needs to be separated. In my current situation.

0

Form:

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');  
   });  
});

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.