Làm cách nào để xử lý sự kiện được ủy quyền cho các thành phần con?

Question

Khi ủy thác sự kiện sử dụng .on làm thế nào để tôi nhắm mục tiêu yếu tố con:

Tôi đã thử: childSelector =

• >*
• >:nth-child(n)

Nhưng không có gì được chọn khi tôi bắt đầu với >.

$(selector).on(event, childSelector, handler); 

Đôi khi tôi muốn nhắm mục tiêu một đứa trẻ trực tiếp, đôi khi tôi làm không được: (pseudo code)

var func = function(selector, subSelector) { 
    $(selector).on("click", subSelector, function() { 
     alert("my subSelector is clicked"); 
    }); 
} 

func("#wrapper", "direct-child-selector"); 
func("#wrapper", ".some .other > .selector:first"); 

Thats lý do tại sao tôi yêu cầu cho một selector và không phải là một sửa chữa.

Answer 1

Bạn thể kiểm tra trong xử lý cho dù phần tử là một phần tử con của phần tử mà trình xử lý sự kiện được giao cho;

$(selector).on("event", '*', function (e) { 
    if (e.target.parentNode === e.delegateTarget) { 
     // Woo! 
    } 
}); 

Xem e.delegateTarget. Đáng lưu ý rằng e.delegateTarget đã được giới thiệu trong jQuery 1.7, vì vậy sẽ không hoạt động trên các phiên bản cũ hơn.

Về chỉnh sửa thứ hai của bạn, ở dạng hiện tại, các bộ chọn không rõ ràng; không có cách nào cho bạn, trong mã và trong biểu mẫu hiện tại của nó, phát hiện xem bộ chọn đã chuyển có được dự định là bộ chọn chỉ dành cho trẻ em hay không. Bạn có thể giới thiệu một tham số khác để cho biết liệu nó có phải là một bộ chọn chỉ dành cho trẻ hay thêm > vào đầu bộ chọn (ví dụ) và kiểm tra điều đó;

var func = function(selector, subSelector, isChild) { 
    $(selector).on("click", subSelector, function(e) { 
     if (isChild && e.parentNode == e.delegateTarget || !isChild) { 
      alert("my subSelector is clicked"); 
     } 
    }); 
} 

func("#wrapper", "direct-child-selector", true); 
func("#wrapper", ".some .other > .selector:first" /* , `false` is optional */); 

Hoặc:

var func = function(selector, subSelector) { 
    if (subSelector.charAt(0) === '>') { 
     subSelector = selector + subSelector; 
    } 

    $(selector).on("click", subSelector, function(e) { 
     alert("my subSelector is clicked"); 
    }); 
} 

func("#wrapper", "> direct-child-selector"); 
func("#wrapper", ".some .other > .selector:first"); 

Answer 2

Một cách để chỉ các sự kiện đại biểu gây ra đối với trẻ em trực tiếp là để cung cấp một bộ chọn đầy đủ để on(), trong đó có một phần phù hợp với yếu tố phụ huynh:

$(selector).on("event", selector + " > *", handler); 

Answer 3

Tất cả bạn cần là:

childSelector = "*"; 

nếu đó là nghĩa vụ để phù hợp với bất kỳ đứa trẻ của bộ chọn. Nó chỉ tìm kiếm trong phạm vi của bộ chọn.

Answer 4

Điều này phù hợp với tôi.

$('#container').on('click', '> .children', function(){ 
... 
})