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?
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");
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");
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/
vous devez enchaîner la méthode comme ceci:
$('#input').val('test').change();
Non vous pourriez avoir besoin de le déclencher manuellement après avoir défini la valeur:
$('#mytext').change();
ou:
$('#mytext').trigger('change');
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.
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.