Why is my custom jQuery `change` event being triggered twice?

Question

I am trying to make a jQuery-compatible composite HTML input.

In this example when either select changes, the alert is invoked twice. Why?

Given a simple container node:

<span id="x"></span>

Here is a fully working demo:

function el (type) {
    return document .createElement (type);
}

function opt (sel, value) {
    let node = el ('option');
    node .value = value;
    node .appendChild (document .createTextNode (value));
    sel .appendChild (node);
}

let x = document .getElementById ('x');
let a = el ('select');
let b = el ('select');

x .appendChild (a);
x .appendChild (b);

opt (a, 'a_1');
opt (a, 'a_2');
opt (b, 'b_1');
opt (b, 'b_2');

$(a) .change (function () {$(x) .trigger ('change');});
$(b) .change (function () {$(x) .trigger ('change');});

$(x) .change (function () {alert ('changed');});

Because both a and b = select? Do you try to do let b = el ('select#b') and let a = el ('select#a') ? — Timmy Von Heiss, Sep 05 '16 at 13:08

Haresh Vidja · Answer 1 · 2016-09-05T13:15:00.533

Its because when you are change value in dropdown it change parent evelement drom structure. it means you are changing value of A an B it patent of A and B is X so it change automatically so you have to stop event propagation

you have to remove below code

$(a) .change (function () {$(x) .trigger ('change');});
$(b) .change (function () {$(x) .trigger ('change');});

or you have to use preventDefault();

$(a) .change (function (e) {e.preventDefault(); $(x) .trigger ('change'); return false; });
$(b) .change (function (e) {e.preventDefault(); $(x) .trigger ('change'); return false; });

score 0 · Answer 2 · edited May 23 '17 at 11:51

Does the onchange event propagate?

The jQuery documentation suggests that this event applies only to inputs, selects and textarea, in any case, what is happening is propagation (bubble) to the parent element.

If you stop the propagation, will work:

$(a) .change (function (event) {
    $(x) .trigger ('change');
    console.log('a');
    event.stopPropagation();
});

$(b) .change (function (event) {
    $(x) .trigger ('change');
    console.log('b');
    event.stopPropagation();
});

Why is my custom jQuery `change` event being triggered twice?

2 Answers2