web-dev-qa-db-fra.com

val () ne déclenche pas change () dans jQuery

J'essaie de déclencher l'événement change sur une zone de texte lorsque je modifie sa valeur avec un bouton, mais cela ne fonctionne pas. Vérifiez ce violon .

Si vous tapez quelque chose dans les zones de texte et cliquez ailleurs, change est déclenché. Toutefois, si vous cliquez sur le bouton, la valeur de la zone de texte est modifiée, mais change ne se déclenche pas. Pourquoi?

jquerytriggers
315
Ergec

onchange ne se déclenche que lorsque l'utilisateur tape dans l'entrée et que celle-ci perd le focus.

Vous pouvez appeler manuellement l'événement onchange en utilisant après avoir défini la valeur:

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

Alternativement, vous pouvez déclencher l'événement en utilisant:

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

De l'excellente suggestion de redsquare, cela fonctionne bien:

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

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

Vous pouvez très facilement remplacer la fonction val pour déclencher un changement en le remplaçant par un proxy de la fonction val d'origine.

ajoutez simplement ce code quelque part dans votre document (après avoir chargé 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 exemple de travail: ici

(Notez que cela déclenchera toujours change lorsque val(new_val) sera appelé, même si la valeur n'a pas changé.)

Si vous voulez déclencher le changement UNIQUEMENT lorsque la valeur a réellement changé, utilisez celui-ci:

//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);

Exemple en direct pour cela: http://jsfiddle.net/5fSmx/1/

27
Yaron U.

Vous devez chaîner la méthode comme ceci:

$('#input').val('test').change();
16
Timothy Gonzalez

Non, vous devrez peut-être le déclencher manuellement après avoir défini la valeur:

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

ou:

$('#mytext').trigger('change');
13
Darin Dimitrov

Il semble que les événements ne bouillonnent pas. Essaye ça:

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

J'espère que ça aide.

J'ai simplement essayé une vieille $("#mytext").trigger('change') sans enregistrer l'ancienne valeur, et le .change se déclenche même si la valeur n'a pas changé. C'est pourquoi j'ai sauvegardé la valeur précédente et appelé $("#mytext").trigger('change') uniquement si elle change.

8
Jay Godse

Depuis février 2019, .addEventListener() ne fonctionne pas actuellement avec jQuery .trigger() ou .change(), vous pouvez le tester ci-dessous à l'aide de Chrome ou de Firefox.

txt.addEventListener('input', function() {
  console.log('not called?');
})
$('#txt').val('test').trigger('input');
$('#txt').trigger('input');
$('#txt').change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">

vous devez utiliser .dispatchEvent() à la place.

txt.addEventListener('input', function() {
  console.log('it works!');
})
$('#txt').val('yes')
txt.dispatchEvent(new Event('input'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="txt">
2
cieunteung

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

L'événement change est envoyé à un élément lorsque sa valeur change. Cet événement est limité aux éléments <input>, aux éléments <textarea> et aux éléments <select>. Pour les cases à cocher, les cases à cocher et les boutons radio, l'événement est déclenché immédiatement lorsque l'utilisateur effectue une sélection à l'aide de la souris, mais pour les autres types d'élément, l'événement est différé jusqu'à ce que l'élément perd le focus.

1
Sky Yip

Je sais que c’est un vieux fil conducteur, mais pour les autres, les solutions ci-dessus ne sont peut-être pas aussi bonnes que les suivantes. Au lieu de vérifier les événements change, vérifiez les événements input.

$("#myInput").on("input", function() {
    // Print entered value in a div box
    $("#result").text($(this).val());
});
0
Slipoch