web-dev-qa-db-fra.com

Comment déclencher l'événement de changement JQuery lorsque la valeur d'entrée est modifiée par programme?

Je veux déclencher l'événement JQuery change lorsque le texte d'entrée est modifié par programme, par exemple comme ceci:

$("input").change(function(){
    console.log("Input text changed!");
});
$("input").val("A");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />

Mais ça ne marche pas. Comment puis-je faire ce travail? 

javascriptjqueryhtmlonchange
23
Mohammad

l'événement change ne se déclenche que lorsque l'utilisateur tape dans l'entrée, puis perd le focus.

Vous devez déclencher l'événement manuellement à l'aide de change() ou trigger('change')

$("input").change(function() {
  console.log("Input text changed!");
});
$("input").val("A").change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' />

30
Pranav C Balan

Le gestionnaire d'événements .change() se comporte comme une soumission de formulaire - lorsque la valeur change lors de l'envoi de la console, elle sera consignée. Pour vous comporter en saisie de texte, vous voudriez utiliser une entrée, comme ci-dessous:

$("input").on('input', function(){
    console.log("Input text changed!");
});
$("input").val("A");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />

4
kawnah

Ce que vous devez faire, c'est déclencher l'événement change après avoir défini le texte. Vous pouvez donc créer une fonction pour le faire afin de ne pas devoir la répéter à chaque fois que vous devez mettre à jour le texte, comme ceci:

function changeTextProgrammatically(value) {
    $("input").val( value );
    $("input").trigger( 'change' ); // Triggers the change event
}

changeTextProgrammatically( "A" );

J'ai mis à jour le violon ,

1
RageAgainstTheMachine

Vous pouvez utiliser l'événement DOMSubtreeModified:

$('input').bind('DOMSubtreeModified',function(){...})

Si vous voulez déclencher les deux utilisateur et changements de code:

$('input').bind('input DOMSubtreeModified',function(){...})

Cet événement est considéré comme obsolète et prend parfois beaucoup de temps, mais il peut aussi s'avérer très efficace s'il est utilisé avec précaution.

0
Dr Fred

jquery change event ne fonctionne que lorsque l'utilisateur tape dans l'entrée puis perd le focus. Vous pouvez donc utiliser la solution de contournement suivante pour le faire: - Supposons que vous ayez un bouton en cliquant sur ce qui entraîne un changement de la valeur de l'entrée. (cela pourrait être n'importe quoi d'autre au lieu d'un bouton)

var original_value = $('input').val();
$('button').click(function(){
var new_value = $('input').val();
if(original_value != new_value ){
   //do something
  }
//now set the original value to changed value (in case this is going to change again programatically)
original_value = new_value;
})
0
Arun Kumar