làm thế nào để đính kèm xử lý sự kiện jquery cho html mới được tiêm?

Question

Tôi làm cách nào để sử dụng .on() nếu HTML chưa được tạo? Trang jQuery nói

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.

Nhưng tôi không thực sự chắc chắn cách thực hiện điều đó. Có cách nào để "tải lại" trình xử lý sự kiện không?

Vì vậy, nếu tôi đã

$(document).ready(function(){ 
    $('.test').on('click', function(){ 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 
generatePage(); 
}); 

nơi generatePage() tạo ra một loạt các divs với .test, thế nào tôi sẽ rebind .on()?

Tôi đã biết các câu hỏi tương tự đã được hỏi, nhưng tôi không tìm thấy những gì tôi đang tìm kiếm sau khi tìm kiếm nhanh.

Answer 1

Sử dụng .on như trong ví dụ bên dưới. Người ta có thể đoán rằng thẻ body luôn có sẵn để an toàn để gắn trình xử lý sự kiện vào cơ thể và ủy quyền các sự kiện cho bộ chọn, trong trường hợp này là .test.

$(document).ready(function(){ 
    $('body').on('click', '.test', function(){ // Make your changes here 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 

    generatePage(); 
}); 

Hoặc nếu generatePage() cũng được tạo ra html, đầu và thân thẻ sử dụng tài liệu như chọn của bạn.

$(document).ready(function(){ 
    $(document).on('click', '.test', function(){ // Make your changes here 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 

    generatePage(); 
}); 

Theo jquery documentation .Trên chấp nhận các thông số sau:

.on(events [, selector] [, data], handler(eventObject)) 

Gồm selector được mô tả như sau:

Khi một chọn được cung cấp, xử lý sự kiện được được gọi là được ủ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ỉ dành cho hậu duệ (các phần tử bên trong) mà 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 nhất với 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 này.