Pourquoi le jquery événement de changement déclenche pas lorsque j'ai mis la valeur d'un select à l'aide de val()?

Question

<select id="single">
    <option>Single</option>
    <option>Single2</option>
</select>

<script>
$(function() {
    $(":input#single").change(function(){
    /* This logic is not being run when value is set by val(), but does run when user selects a value with their mouse */
    }
});

$("#single").val("Single2");
</script>

Answer 1

Parce que l' change événement nécessite une réelle navigateur événement initié par l'utilisateur à la place de la via du code javascript.

Faire ceci à la place:

$("#single").val("Single2").change();

Answer 2

Je crois que vous pouvez déclencher manuellement l'événement de changement avec trigger():

$("#single").val("Single2").trigger('change');

Mais pourquoi il ne se déclenche pas automatiquement, je n'ai aucune idée.

Answer 3

L'ajout de ce morceau de code après le val() semble fonctionner:

$(":input#single").trigger('change');

Answer 4

Aussi loin que je peux lire dans l'API. L'événement n'est déclenché lorsque l'utilisateur clique sur une option.

http://api.jquery.com/change/

Pour sélectionner les cases, 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 l' d'autres types d'éléments de l'événement est différé jusqu'à ce que l'élément perd le focus.

Answer 5

Parce que c'est pas comment jQuery est défini à travailler; il n'est pas simplement parce qu'il ne veut pas. Pour moi qui fait sens, parce que le navigateur lui-même ne se déclenche pas "modifier" si vous directement mettre à jour l'attribut "value" d'un élément d'entrée (ou textarea ou quoi que ce soit).

Si vous voulez ce genre de comportement, vous pouvez toujours écrire votre propre plugin.