Comment déclencher un événement de changement jQuery dans le code

177

J'ai un événement de changement qui fonctionne bien, mais je dois le faire revenir.

J'ai donc une fonction qui se déclenche sur le changement qui va "changer" d'autres listes déroulantes basées sur un sélecteur de classe (notez "drop downS", il pourrait y en avoir plus d'un). Ce changement de proxy ne déclenche pas la fonction et échoue donc. Comment puis-je le faire fonctionner?

Code

$(document).ready(function () {
    var activeDropBox = null;

    $("select.drop-box").change(function () {
        var questionId = $(this).attr("questionId");
        var selectedAnswer = $(this).val();
        activeDropBox = this;

        alert(this.questionId);

        $.ajax(
        {
            type: "POST",
            url: answerChangedActionUrl,
            data: { questionId: questionId, selectedValue: selectedAnswer },
            success: function (data) {
                SetElementVisibility(data.ShowElement, questionId);
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert('XMLHttpRequest:' + XMLHttpRequest.responseText);
                alert('textStatus:' + textStatus);
                alert('errorThrown:' + errorThrown);
            }
        });
    });

    function SetElementVisibility(visible, questionId) {
        // I would like each child to then trigger the change event...
        $(".childOf" + questionId)[visible ? 'show' : 'hide']('slow');

        // Suggested code
        //$(".childOf" + questionId + " select").trigger("change");

        if (!visible) {
            $(".childOf" + questionId + " select").attr('selectedIndex', 0);
        }
    }
}

Les suggestions jusqu'à présent semblent fonctionner, mais comme l'événement de changement déclenche un post ajax, il semble maintenant échouer ici. Je vais jouer avec mais c'est quelque chose pour une autre question que je ressens.

javascript jquery javascript-events 4imble
la source
1
Fournissez du code pour que nous puissions jeter un coup d'œil
Alex Rashkov
Comment pouvons-nous vous dire comment le faire fonctionner, alors que vous ne nous avez pas montré ce que c'est ?
user113716
1
Je pensais que c'était un concept simple et je ne pensais pas que le code était nécessaire. Les réponses jusqu'à présent semblent avoir compris mon explication et j'essaie donc leurs solutions maintenant. Si je n'ai aucune joie, je posterai du code. Ma mise en œuvre est en fait beaucoup plus complexe.
4imble
1
Trié, c'était un problème avec moi en changeant la valeur après le post ajax. Merci à tous pour l'aide. Les suggestions publiées ont fonctionné comme un charme.
4imble

Réponses:

391

Utilisez la méthode trigger () 

$(selector).trigger("change");
John Hartsock
la source
4
Y a-t-il un avantage à cela change()? Ou est-ce juste une préférence?
Joshua Pinter
6
@JoshPinter pas de réel avantage, plus une préférence. Mais certainement plus facile à résumer comme paramètre qu'un nom de méthode.
John Hartsock
Définir une valeur avant de déclencher un événement de changement est le meilleur moyen !!
Kapil Yadav
33

pour moi, $('#element').val('...').change()c'est le meilleur moyen.

Luis Carlos Steffens
la source
Ouais !, j'aime celui-ci
Juan Herrera
Oui! il permet de choisir l'option en même temps. Je pense que votre réponse mérite d'être la meilleure ici.
Sergej Fomin
20

La forme sans paramètre de la méthode change () déclenche un changeévénement. Vous pouvez écrire quelque chose comme:

$(document).ready(function() {
    $("#yourInitialElementID").change(function() {
        // Do something here...
        $(".yourDropDownClass").change();
    });
});
Frédéric Hamidi
la source
8

Utiliser ça : 

$(selector).trigger("change");

OU

$('#id').trigger("click");

OU

$('.class').trigger(event);

Le déclencheur peut être n'importe quel événement pris en charge par javascript. J'espère qu'il est facile à comprendre pour vous tous.

Muhammad Fahad
la source