val() n'est pas de déclencher un changement() en jQuery

j'essaie de déclencher l'événement change sur une boîte de texte quand je change sa valeur avec un bouton, mais ça ne marche pas. Cochez ce violon .

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

282
demandé sur Hristiyan Dodov 2010-07-05 16:17:10

7 réponses

onchange ne se déclenche lorsque l'utilisateur tape dans l'entrée, puis l'entrée 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");
368
répondu GenericTypeTea 2010-07-05 12:19:27

D'après l'excellente suggestion de redsquare, cela fonctionne bien:

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

$("#my-input").changeVal("Tyrannosaurus Rex");
53
répondu Chris Fulstow 2018-03-28 14:19:57

vous pouvez très facilement remplacer la fonction val pour déclencher le changement en la remplaçant par un proxy à la fonction val originale.

il suffit d'ajouter 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);

exemple pratique: ici

(notez que cela déclenchera toujours change lorsque val(new_val) est appelé même si la valeur n'a pas réellement changé.)

si vous voulez déclencher un changement uniquement lorsque la valeur a effectivement changé, utilisez celle-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);

Live exemple: http://jsfiddle.net/5fSmx/1/

24
répondu Yaron U. 2017-01-03 16:10:05

vous devez enchaîner la méthode comme ceci:

$('#input').val('test').change();
14
répondu Timothy Gonzalez 2017-05-13 07:49:36

Non vous pourriez avoir besoin de le déclencher manuellement après avoir défini la valeur:

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

ou:

$('#mytext').trigger('change');
12
répondu Darin Dimitrov 2010-07-05 12:19:31

on dirait que les événements ne bouillonnent pas. Essayez ceci:

$("#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 cela aidera.

j'ai essayé juste un vieux $("#mytext").trigger('change') sans sauver l'ancienne valeur, et le .change feux même si la valeur n'a pas changé. C'est pourquoi j'ai enregistré la valeur précédente et appelé $("#mytext").trigger('change') seulement si elle change.

8
répondu Jay Godse 2013-09-20 08:51:00

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> , <textarea> et <select> . Pour sélectionner les cases, cases à cocher et des boutons radio, l'événement est déclenché immédiatement lorsque l'utilisateur effectue une sélection avec la souris, mais pour les autres types d'éléments de l'événement est reporté jusqu'à ce que l'élément perd le focus.

1
répondu Sky Yip 2016-07-20 09:15:45