How to trigger jQuery change event in code

Question

I have a change event that is working fine but I need to get it to recurse.

So I have a function that is triggered on change that will "change" other drop downs based on a class selector (notice "drop downS", there could be more than one). This proxy change does not trigger the function and so fails. How can I get it to work?

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);
        }
    }
}

The suggestions so far seem to work, but as the change event triggers an ajax post it now seems to fail here. I'm going to play around with it but that is something for another question I feel.

How can we tell you how to get it to work, when you haven't shown us what *it* is? — user113716, Nov 22 '10 at 15:58
I thought it was a simple concept and didn't feel code was required. The answers so far seem to have understood my explanation and so I am trying their solutions now. If I don't have any joy I'll post some code. My implementation is actually much more complex. — 4imble, Nov 22 '10 at 16:05
Sorted it, was a problem with me changing the value after the ajax post. Thanks all for the help. The suggestions posted worked like a charm. — 4imble, Nov 22 '10 at 16:35

score 501 · Accepted Answer · answered Nov 22 '10 at 15:51

501

Use the trigger() method

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

answered Nov 22 '10 at 15:51

John Hartsock

85,422
23
131
146

4

Is there any benefit to this over `change()`? Or is it just preference? – Joshua Pinter Oct 13 '15 at 16:36
6

@JoshPinter no real benefit, more a preference. But definitely easier to abstract as a parameter than a method name. – John Hartsock Oct 28 '15 at 01:29
1

Setting a value before actually triggering change event is the best way!! – Kapil Yadav Mar 18 '20 at 06:12
3

Latest versions of jQuery (3 atm) will raise a warning when using the deprecated shorthand `.change()`. You should use `.trigger('change')` instead. – Tim Jul 21 '21 at 14:44
lets celebrate with 500 vote. dear john. its really help ful for me – Yagnesh bhalala Aug 15 '23 at 08:57

score 53 · Answer 2 · edited Sep 17 '21 at 05:00

53

For me

$('#element').val('...').change()

is the best way.

Note: .change() is deprecated in newer versions use .trigger('change') instead.

edited Sep 17 '21 at 05:00

Amit Shah

7,771
5
39
55

answered Jan 30 '15 at 11:50

Luis Carlos Steffens

541
4
3

Yeah!, I like this one – Juan Herrera May 14 '16 at 16:44
Yes! it allows to choose option on the same time. I think your answer deserves to be the best here. – Sergej Fomin Sep 19 '17 at 11:05
This is the only way to trigger change event when programmatically altering the element's value. – CodeMantle Jul 26 '20 at 09:45
1

this is now deprecated. all best function essentials for development are getting deprecated... is it to make the developer keep learning new things always? – Amit Shah Mar 24 '21 at 03:04
@AmitShah Yeah I think `.change()` is deprecated in newer versions but `.trigger('change')` can be used just as well. I think the jQuery team is tired of making shortcuts for functions. It is also easier to find the right function to call when the documentation is a lot smaller. – Peter Krebs Sep 14 '21 at 07:17

Frédéric Hamidi · Answer 3 · 2015-07-20T22:09:46.927

21

The parameterless form of the change() method triggers a change event. You can write something like:

$(document).ready(function() {
    $("#yourInitialElementID").change(function() {
        // Do something here...
        $(".yourDropDownClass").change();
    });
});

edited Jul 20 '15 at 22:09

answered Nov 22 '10 at 15:52

Frédéric Hamidi

258,201
41
486
479

this method is not getting Deprecated. – Amit Shah Mar 24 '21 at 03:05

Geoffrey Hale · Answer 4 · 2017-06-14T18:34:54.210

14

$(selector).change()

.change()

.trigger("change")

Longer slower alternative, better for abstraction.

.trigger("change")

$(selector).trigger("change")

edited Jun 14 '17 at 18:34

answered Jan 19 '16 at 02:00

Geoffrey Hale

10,597
5
44
45

score 13 · Answer 5 · answered Feb 16 '16 at 09:01

13

Use That :

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

OR

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

OR

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

Trigger can be any event that javascript support.. Hope it's easy to understandable to all of You.

answered Feb 16 '16 at 09:01

Muhammad Fahad

1,352
15
15

How to trigger jQuery change event in code

Code

5 Answers5

.trigger("change")

Linked

Related