Triggering "change" with jQuery with multiple selectors

Question

I'm trying to trigger a "change" event on two different selectors using jQuery, but for some reason, when I do this, only the first selector actually seems to trigger the event.

This is what I'm doing:

jQuery(first_field).trigger('change');
jQuery(second_field).trigger('change');

I want to do this because I have functions for the change events on selector_1 and selector_2 that disables certain input fields in a form. The way that I'm assessing that the second change event isn't being triggered is by the fact that those input fields are not being disabled.

I know the disabling functions work and the jQuery .change events work because if I simply change the form using my mouse, the functions behave as I expect.

Update:

Here is the enable/disable code:

function disable_field(s) {
    if ($(s).disabled != true) {
        $(s).disabled = true;
        /* Reset text value */
        if ($(s).type == "text") {
            $(s).value = "";
        /* Reset selected value */
        } else if ($(s).type == "select-one") {
            $(s).selectedIndex = 0;
        }
    }
}
function enable_field(s) {
    if ($(s).disabled != false) {
        $(s).disabled = false;
    }
}

Note that this code is being used with Qualtrics; survey software that allows you to put JS along with your questions. They have their own selector assigned to $() which only allows ids.

Here is the .change code:

    jQuery(first_field).change(function() {
        /* Parse id */
        var the_id = this.id;
        var this_question = the_id.slice(-1);
        the_id = the_id.substring(0, the_id.length - 3);
        /* Create selectors */
        var selector2 = the_id + '2~' + this_question;
        var selector3 = the_id + '3~' + this_question + '~1~TEXT';
        /* Handle toggle */
        if (this.selectedIndex == 1) { 
            disable_field(selector2);
            disable_field(selector3);
        } else {
            /* Account for value of second_field */
            if ($(selector2).selectedIndex != 1;) {
                enable_field(selector3);
            }
            enable_field(selector2);
        }
    });

    jQuery(second_field).change(function () {
        /* Parse id */
        var the_id = this.id;
        var this_question = the_id.slice(-1);
        the_id = the_id.substring(0, the_id.length - 3);
        /* Create selectors */
        var selector3 = the_id + '3~' + this_question + '~1~TEXT';
        /* Handle toggle */
        if (this.selectedIndex == 1) { 
            disable_field(selector3);
        } else {
            enable_field(selector3);
        }           
    });

What if you comment out the first one? Does the second line by itself lead to the desired result? — Felix Kling, Aug 29 '13 at 18:04
@FelixKling It does. When I switch the order of the triggering, it's always only the first one that works. — atb, Aug 29 '13 at 18:12
There's nothing wrong with what you've posted. There must be other context missing from the question that causes the issue: http://jsfiddle.net/Uw5cX/ — Jason P, Aug 29 '13 at 18:18
Hmm, alright, well I've added some more code if anyone cares to help me out and explain why it wasn't working in the way I wanted it to (or simply critique my code.. I guess I could use some of that!) — atb, Aug 29 '13 at 19:06

score 4 · Accepted Answer · answered Aug 29 '13 at 18:04

4

Try using .add()

$(selector_1).add(selector_2).trigger('change');

answered Aug 29 '13 at 18:04

Itay

16,601
2
51
72

While this answers the OP's question, I don't think that triggering the change event with two statements is the problem. – Felix Kling Aug 29 '13 at 18:05
I agree. That's why I said "try" :) – Itay Aug 29 '13 at 18:06
1

I'm surprised that it worked. Maybe the first selector was also selecting elements within the second selector or vice-versa? – Cesar Castro Aug 29 '13 at 18:17
1

@alexthebake If that's the correct answer you should accept it as the correct one with the "V" button. Seza - This could be caused by a lot of things... We can just guess unless we see the relevant code – Itay Aug 29 '13 at 18:18

Triggering "change" with jQuery with multiple selectors

1 Answers1