Dlaczego moje zdarzenie niestandardowe jQuery `change` jest wyzwalane dwukrotnie?

Question

Jestem trying to make jQuery kompatybilny kompozytowe wejście HTML.

Po zmianie select, alert wywołuje się dwukrotnie. Czemu?

Biorąc prosty węzeł kontenera:

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

Oto demo w pełni robocze:

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

Answer 1

Jego ponieważ kiedy jesteś wartość zmiana w rozwijanym zmieni rodzic evelement strukturę Drom. oznacza to, że zmieniają wartość patentu sieci IT B A i B wynosi X tak, aby automatycznie zmienić, więc trzeba zatrzymać propagacji zdarzenia

trzeba usunąć poniżej kod

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

albo trzeba użyj preventDefault();

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

Answer 2

Does the onchange event propagate?

jQuery documentation sugeruje, że zdarzenie to ma zastosowanie tylko do wejść, wybiera i textarea, w każdym razie to, co się dzieje jest propagacja (bańka) do elementu nadrzędnego.

Przerwanie propagacji, będzie działać:

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

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