jQuery 'on' không được đăng ký ở chế độ bật động được tạo động

Question

Tôi đã ấn tượng rằng trình xử lý sự kiện on của jQuery có nghĩa là có thể 'lắng nghe' cho các phần tử được tạo động và được cho là thay thế hành vi của live. Tuy nhiên, những gì tôi đã trải nghiệm là sử dụng on không chụp sự kiện nhấp trong khi sử dụng live là thành công!

Khía cạnh khó khăn trong hoàn cảnh của tôi là tôi không chỉ tạo nội dung động mà tôi đang thực hiện thông qua cuộc gọi AJAX .get() và chèn HTML kết quả vào một cửa sổ bật lên jQueryUI phương thức .dialog().

Đây là một phiên bản đơn giản của những gì tôi đã cố gắng để hoàn thành (bọc trong $(document).ready(...)):

$.get("getUserDataAjax.php", queryString, function(formToDisplay) { 
    $("#dialog").dialog({ 
     autoOpen: true, 
     modal: true, 
     buttons... 
    }).html(formToDisplay); 
}); 
$(".classThatExistsInFormToDisplay").on("click", function() { 
    alert("This doesn't get called"); 
}); 

Từ tài liệu cho on Tôi thấy điều này mà đó là làm thế nào tôi đã được tiếp cận văn bản sự kiện on tôi:

$("p").on("click", function(){ 
    alert($(this).text()); 
}); 

Tuy nhiên, vì lý do nào đó, live sẽ hoạt động như tôi mong đợi - trong khi on không hoạt động.

Đây không phải là một câu hỏi cho "làm thế nào tôi có thể làm cho nó hoạt động" bởi vì tôi đã phát hiện ra rằng on sẽ thành công (nhấp chuột chụp) nếu tôi tuyên bố nó bên các function(formToDisplay) gọi lại.

Câu hỏi của tôi là: điều gì sai với on rằng không tìm thấy các phần tử được tạo động của tôi trong cửa sổ bật lên phương thức? Ví dụ jQuery của tôi là jquery-1.7.2. jQueryUI là 1.8.21.

Dưới đây là hai câu hỏi jsFiddles gần đúng vấn đề. Nhấp vào từ "Kiểm tra" trong cả hai trường hợp để xem hành vi khác nhau. Sự khác biệt duy nhất trong mã đang thay thế on cho live.

Nơi the click bị bắt bởi live.

Trường hợp the click KHÔNG bị bắt bởi on (nhấp vào 'Kiểm tra - nhấp vào tôi' để xem không có gì xảy ra).

Tôi nhận ra tôi chỉ có thể được sử dụng on không thích hợp hoặc yêu cầu nó để làm một cái gì đó mà không được dự định nhưng tôi muốn biết tại sao nó không làm việc (nhưng nếu bạn có một cái gì đó khủng khiếp thông minh, cảm thấy tự do để chia sẻ). Cảm ơn sự khôn ngoan của bạn!

Cập nhật/trả lời/Giải pháp:

Theo người sử dụng 'undefined', sự khác biệt là on không được ủy thác tất cả các cách từ đỉnh của đối tượng document trong khi live does/là.

Như Claudio đề cập, có những phần của tài liệu on mà tham khảo các yếu tố động tạo và những gì bạn đưa vào $("") phần của truy vấn cần phải tồn tại trong thời gian chạy. Đây là giải pháp mới của tôi: Ghi lại các sự kiện nhấp chuột on hộp thoại phương thức của tôi, mặc dù nó không có bất kỳ nội dung nào khi sự kiện được tạo trong thời gian chạy, sẽ có thể tìm thấy nội dung và phần tử của tôi với lớp đặc biệt được tạo một lát sau.

$("#dialog").on("click", ".classThatExistsInFormToDisplay", function() { 
    ... //(success! Event captured) 
}); 

Cảm ơn rất nhiều!

Answer 1

live đại biểu các sự kiện từ các đối tượng tài liệu, nhưng on doesn Nếu bạn muốn ủy quyền sự kiện bằng phương thức on, bạn nên ủy quyền sự kiện từ một trong các phụ huynh tĩnh của thành phần hoặc document đối tượng:

$(document).on("click", ".clickHandle", function() { 
    alert("Content clicked"); 
}); 

Answer 2

Vấn đề là yếu tố mà bạn đính kèm sự kiện phải tồn tại.

Bạn phải sử dụng on như thế này để chụp nhấp chuột vào p thẻ tạo động

$("#existingContainerId").on("click", "p", function(){ 
    alert($(this).text()); 
}); 

nếu bạn không có chứa hiện tại liên quan đến sử dụng, bạn có thể sử dụng $("body") hoặc $(document)

Nếu chọn được bỏ qua hoặc là null, trình xử lý sự kiện được gọi trực tiếp hoặc trực tiếp ràng buộc. Trình xử lý được gọi mỗi khi một sự kiện xảy ra trên các phần tử đã chọn, cho dù nó xảy ra trực tiếp trên phần tử hoặc bong bóng từ phần tử con cháu (bên trong).

Khi bộ chọn được cung cấp, trình xử lý sự kiện được gọi là ủy quyền. Trình xử lý không được gọi khi sự kiện xảy ra trực tiếp trên phần tử bị ràng buộc, nhưng chỉ cho các hậu duệ (các phần tử bên trong) khớp với bộ chọn. jQuery bong bóng sự kiện từ mục tiêu sự kiện lên đến phần tử mà trình xử lý được đính kèm (tức là, trong cùng đến phần tử ngoài cùng) và chạy trình xử lý cho bất kỳ phần tử nào dọc theo đường dẫn đó khớp với bộ chọn.

Trình xử lý sự kiện chỉ được liên kết với các phần tử hiện được chọn; chúng phải tồn tại trên trang tại thời điểm mã của bạn thực hiện lệnh gọi tới .on(). Để đảm bảo các phần tử có mặt và có thể được chọn, hãy thực hiện ràng buộc sự kiện bên trong trình xử lý sẵn sàng tài liệu cho các phần tử nằm trong đánh dấu HTML trên trang. Nếu HTML mới đang được đưa vào trang, hãy chọn các phần tử và đính kèm trình xử lý sự kiện sau khi HTML mới được đặt vào trang. Hoặc, sử dụng các sự kiện giao cho đính kèm một xử lý sự kiện, như mô tả tiếp theo

Hãy xem phần trực tiếp và ủy thác các sự kiệnhere để biết thêm chi tiết