Jquery: Nhấp vào sự kiện không hoạt động sau khi nối thêm. (Không biết cách sử dụng .ON)

Question

Tôi có 2 sự kiện nhấp chuột. Một phụ thêm một IMG bao gồm một sự kiện nhấp chuột khác. Nó không hoạt động rõ ràng. Tôi biết rằng tôi phải sử dụng jQuery của., Nhưng tôi chỉ không thể tìm ra cách và ở đâu.

Mã của tôi:

$(document).ready(function() { 
    // The one below (.choimh) isn't triggered anymore 
    $('.choimg').click(function(){ 

    }); 

    // Switch to chosen color 
    $('.color').click(function(){ 
     $(".thumbs").append('<a href="#"><img id="image'+u+'" class="choimg" src="/img/products/mini/'+colnumber+'-'+ i + '.jpg" />'); 
    }); 
}); 

Các .color div là một nơi hoàn toàn khác so với .choimg.

Tôi không thể tìm ra cách sử dụng .ON.

Answer 1

Nó từng là các chức năng live hoặc delegate đã làm điều này. Bây giờ bạn có thể làm điều đó như thế này:

$(document).on('click', '.choimg', function(e) { 

//do whatever 

}); 

Answer 2

Bạn nên sử dụng một cái gì đó như:

$(document).on("click", ".color", function() { 
//append code here 
}); 

nguyên mẫu chung là on(eventType, selector, function), bạn có thể sử dụng các sự kiện khác nữa.

Để biết thêm thông tin, hãy xem this.

Answer 3

jQuery's on thực hiện rất nhiều, nhưng đối với trường hợp cụ thể của bạn, bạn muốn đặt "bật" vào đối tượng DOM không được tải sau khi DOM đã tải. Điều này cho phép sự kiện phát tán lên đối tượng DOM này, sau đó, chuyển giao sự kiện cho mục DOM phù hợp dựa trên bộ chọn thứ hai mà bạn cung cấp.

Nếu bạn theo liên kết ở trên, có rất nhiều thông tin về nó trong tài liệu jQuery. Cụ thể, điều này quan trọng đối với trường hợp của bạn ...

Trình xử lý sự kiện chỉ bị ràng buộc với các yếu 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 yếu tố có mặt và có thể được chọn, hãy thực hiện sự kiện ràng buộc 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 yếu 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 được ủy quyền để đính kèm sự kiện xử lý sự kiện , như được mô tả tiếp theo.

Trong mọi trường hợp, bạn cần phải liên kết với thứ đã tồn tại và cung cấp bộ chọn thứ hai cho thứ sẽ được thêm vào mà bạn muốn có sự kiện thực, cùng với sự kiện và chức năng. Một cái gì đó như thế này ...

$('#selector-to-thing-that-exists').on('click', '.thing-that-will-be-added-later', function() { 
    alert('Do stuff here!'); 
}); 

Lưu ý rằng điều quan trọng là các "điều mà tồn tại" là thấp nhất bạn có thể lấy nó trong DOM cho hiệu quả. Ví dụ, không nên chọn bộ chọn trên 'body' hoặc ở cấp tài liệu. Giữ nó trong tâm trí.

Hy vọng điều này sẽ giúp bạn hiểu rõ hơn về những gì bạn muốn làm. Tôi cao khuyến khích bạn đọc tài liệu jQuery vì nó rất tốt.