Tại sao sự kiện jQuery `change` tùy chỉnh của tôi được kích hoạt hai lần?

Question

Tôi là trying to make một đầu vào HTML hỗn hợp tương thích với jQuery.

Trong this example khi select thay đổi, alert được gọi hai lần. Tại sao?

Cho một nút chứa đơn giản:

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

Đây là một bản demo hoàn toàn làm việc:

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

của nó bởi vì khi bạn thay đổi giá trị trong danh sách thả xuống nó thay đổi cấu trúc drom mẹ evelement. nó có nghĩa là bạn đang thay đổi giá trị của A một B nó bằng sáng chế của A và B là X nên nó thay đổi tự động vì vậy bạn phải ngăn chặn lan truyền sự kiện

bạn phải gỡ bỏ mã dưới đây

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

hoặc bạn phải sử dụng 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?

Các jQuery documentation gợi ý rằng sự kiện này chỉ áp dụng cho đầu vào, lựa chọn và textarea, trong mọi trường hợp, những gì đang xảy ra là công tác tuyên truyền (bong bóng) đến yếu tố phụ huynh.

Nếu bạn dừng việc tuyên truyền, sẽ làm việc:

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

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