val () ne déclenche pas de changement () dans jQuery

J’essaie de déclencher l’événement de change sur une zone de texte lorsque je change 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, le change est déclenché. Toutefois, si vous cliquez sur le bouton, la valeur de la zone de texte est modifiée, mais la change ne se déclenche pas. Pourquoi?

onchange ne se déclenche que lorsque l’utilisateur tape dans l’entrée et que 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 

Vous pouvez également déclencher l’événement en utilisant:

 $("#mytext").sortinggger("change"); 

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

 $.fn.changeVal = function (v) { return this.val(v).sortinggger("change"); } $("#my-input").changeVal("Tyrannosaurus Rex"); 

Vous pouvez très facilement remplacer la fonction val pour déclencher un changement en le remplaçant par un proxy à la fonction val 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).sortinggger('value-changed'); return result; }; })(jQuery); 

Un exemple de travail: ici

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

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

 //This will sortinggger "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).sortinggger('value-changed') return result; }; })(jQuery); 

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

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

 $('#input').val('test').change(); 

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

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

ou:

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

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").sortinggger('change'); } }); 

J’espère que ça aide.

J’ai essayé juste un vieux $("#mytext").sortinggger('change') sans sauvegarder l’ancienne valeur, et le .change 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").sortinggger('change') seulement si elle change.

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

L’événement de change est envoyé à un élément lorsque sa valeur change. Cet événement est limité aux éléments , et . 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 avec la souris, mais pour les autres types d’éléments, l’événement est différé jusqu’à ce que l’élément perd le focus.