.on ("click", function() không hoạt động khi liên kết được hiển thị với ajax

Question

Liên kết bên dưới hiển thị phương thức và chạy yêu cầu ajax để hiển thị một phần trong phương thức dựa trên id đối tượng. modal bật lên khi trang được tải đầy đủ với yêu cầu http, nhưng nếu tôi hiển thị liên kết với yêu cầu ajax (ví dụ: một phương thức khác xuất hiện và hiển thị một vài liên kết) thì hàm js không chạy. một cảnh báo(), chỉ để kiểm tra và nó không chạy khi kết xuất bằng ajax

Tôi đang sử dụng JQuery 1.9.1, trước đây js đã làm việc với .live ('click'), nhưng từ đó đã bị xóa Tôi cũng đã thử .click()

Bất kỳ ý tưởng nào? Cảm ơn bạn!

Liên kết

<a href="/an-object-id" data-remote=true name="modal">  

JS

$(document).ready(function() { 
$("a[name=modal]").on("click", function(e) { 
    $("#mask, #modal").show(); 
    e.preventDefault(); 
etc... 

Answer 1

Đính kèm một event handler cho phụ huynh sử dụng .on() và chuyển bộ chọn làm đối số.

Ví dụ:

$(document).on("click", "a[name=modal]", function(e) {...}); 

mà làm việc cho các yếu tố tạo động cũng ..

Answer 2

$(document).on("click", "a[name=modal]", function(e) { 
    $("#mask, #modal").show(); 
    e.preventDefault(); 
etc... 

Answer 3

sử dụng về sự kiện delegation..since liên kết của bạn được tự động tạo ra ... bấm kiện này sẽ không bị sa thải ... Tài liệu sử dụng để ủy quyền cho sự kiện này ..

$(document).on("click","a[name='modal']", function(e) { 
     .. 
}); 

yo u có thể đi qua các link để đọc thêm về on sự kiện giao .. nó sẽ tốt hơn nhiều nếu bạn ủy trường hợp có yếu tố gần gũi nhất đó là hiện diện trong tài liệu hơn document cho hiệu suất tốt hơn

Answer 4

Về cơ bản, bạn cần để ràng buộc người nghe cho sự kiện click của bạn để một cái gì đó trong DOM mà không được thay đổi . on() có thông số tùy chọn cho phép bạn lọc trình kích hoạt sự kiện thành phần tử con của mục được chọn làm người nghe. Cách đơn giản nhất là sử dụng document, nhưng tôi thích sử dụng bố mẹ gần nhất mà tôi biết tôi sẽ không thay đổi. Vì vậy, giả sử tôi có dấu sau:

<div id="super-awesome-parent"> 
    <ul> 
     <li><a href="#">Some link text</a></li> 
     <li><a href="#">Some link text</a></li> 
     <li><a href="#">Some link text</a></li> 
     <li><a href="#">Some link text</a></li> 
     <li><a href="#">Some link text</a></li> 
    </ul> 
</div> 

tôi có thể viết một đại biểu on() như vậy:

$('#super-awesome-parent').on('click', 'a', function(event){ 
    // ... code 
}); 

Sau đó, bất kỳ <a> yếu tố được thêm vào #super-awesome-parent sau sự kiện ready() sẽ vẫn được xử lý bởi đại biểu.