2012-03-29 44 views
8

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:Làm cách nào để xử lý sự kiện được ủy quyền cho các thành phần 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.

+0

Chỉnh sửa của bạn không có ý nghĩa gì. A * child * là phần tử là hậu duệ trực tiếp của phần tử ... ví dụ: 'child.parentNode === parent'. Một "* con gián tiếp *" chỉ đơn thuần là hậu duệ; ví dụ. 'descendant.parentNode.parentNode.parentNode (v.v.) === tổ tiên'. Bởi vì sự kiện bubbling hoạt động như thế nào, nếu người xử lý được ủy quyền nhận một sự kiện, bạn có thể * đảm bảo * mục tiêu của sự kiện là hậu duệ. – Matt

+0

'@' Andreas: Xem câu trả lời cập nhật của tôi. – Matt

Trả lời

4

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"); 
+0

wow. không biết về 'delicateTarget'. Nhưng tôi vẫn gặp sự cố khi xem câu hỏi đã chỉnh sửa – andlrc

+0

ok cảm ơn sự giúp đỡ của bạn. Vì vậy, có vẻ như không phải là một bộ chọn, nơi bạn có thể đảm bảo để chọn những đứa trẻ trực tiếp và nhường chỗ cho lựa chọn bất cứ điều gì khác với một cách giải quyết. – andlrc

+0

Tôi tin rằng nó cần phải là 'this.parentNode' thay vì' e.parentNode'. Có lẽ 'e.target.parentNode' cũng hoạt động. –

1

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); 
+0

Không phải là '*' được định nghĩa bởi W3C là một cái gì đó để "phù hợp với tất cả các phần tử"? http://www.w3.org/TR/CSS2/selector.html # pattern-matching – LeeGee

+0

@LeeGee, vâng, đúng vậy. Ghép nối nó với bộ chọn con (ví dụ: '" div> * "') cho phép khớp tất cả các con trực tiếp của một tập hợp các phần tử đã cho. –

0

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.

+2

Điều đó sẽ khớp với tất cả * con cháu *. Một phần tử là một đứa trẻ nếu đó là hậu duệ ** ngay lập tức **. – Matt

1

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

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

Vì bạn đã cho các em một lớp học cụ thể. – LeeGee

Các vấn đề liên quan