Khơi lại sự kiện sẵn sàng sau khi tải lại AJAX

Question

Tôi đã nghiên cứu các chủ đề khác và chỉ bị nhầm lẫn.

Tình huống: Tôi đang cung cấp một plugin jQuery chung để tải div người dùng chỉ định động qua AJAX. Mọi thứ đều hoạt động tốt, nhưng trên ví dụ một trang của người dùng, có một phần JS không được gọi, bởi vì sự kiện "sẵn sàng" không bị từ chối.

Tình huống thông thường sẽ là các công cụ jQuery khác của người dùng sẽ được đặt sau jQuery (tài liệu) .ready. gọi

Tôi vừa mới thử nghiệm:

$(document).trigger('ready'); 

bằng tay - nó không có tác dụng gì cả, như tôi đoán rằng "sẵn sàng" được gọi là chỉ một lần và chỉ một lần.

Cách thích hợp để xử lý nó là gì? (nó sẽ là tuyệt vời để cung cấp các giải pháp chung nhất có thể)

Tôi rất muốn làm điều gì đó như gợi ý trong luồng này:

Trigger $document.ready (so AJAX code I can't modify is executed)

Nhưng tôi nghĩ rằng readyList bây giờ đã tin và có thể không được thao tác trực tiếp nữa?

Điều đáng nói là plugin tôi đang cung cấp chức năng gọi lại cho người dùng. Tất nhiên, (s) anh ta có thể đặt mã JS xử lý sau tải trong đó.

Cảm ơn trước và liên quan đến

Answer 1

Bạn không nên cố gắng tải lại toàn bộ chức năng sẵn sàng của DOM. Đặc biệt có hại là bản chất của sự kiện nếu bạn đã làm, 2 sự kiện nhấp chuột trên cùng một phần tử chẳng hạn có khả năng trở thành 4, sau đó là 8 v.v. nếu hàm sẵn sàng DOM được lặp lại bởi chúng.

Bạn có thể tránh điều này bằng cách lấy mã mà bạn cần chạy khi bạn thực hiện xong cuộc gọi ajax và có lẽ là dân số của phần tử mà bạn hy vọng sẽ hưởng lợi từ sự kiện bạn muốn khởi tạo lại .

$(document).ready(function() 
{ 
    initialise(); 

    //... Resume with DOM ready 
}); 

function initialise() 
{ 
    // create event here that needs re-initialising 
} 

Vì vậy khi bạn thực hiện xong cuộc gọi ajax, chỉ cần gọi initialise() một lần nữa.

Hoặc tìm cách sử dụng .on và sử dụng tính năng tạo bọt, đây là cách tôi xử lý loại sự cố này. Nó tránh cho bạn phải suy nghĩ về việc 'khởi tạo lại' bất kỳ phần nào của các hàm sẵn sàng DOM trong các tập lệnh của bạn.

bổ sung từ ý kiến ​​

.on cho phép bạn liên kết các sự kiện để các yếu tố ở mức độ thấp trên trang mà không thay đổi bất cứ lúc nào, trong khi cho phép bạn kiểm soát các yếu tố năng động thực sự kích hoạt sự kiện trong đó thùng đựng hàng.

<div id="container"> 

    <div id="ajax-content"> 

     <a href="#" class="created-link">A new link</a> 

    </div> 

</div> 

Vì vậy, chúng ta biết rằng <a> được tạo ra bởi một chức năng ajax sau sự kiện đã sẵn sàng DOM là bắn, do đó bất kỳ sự kiện trực tiếp áp dụng cho nó thì sẽ không hoạt động.

Thay vào đó, chúng tôi sẽ liên kết sự kiện với phần tử không thay đổi cấp độ và bong bóng đến phần tử DOM động có chứa.

$('#container').on('click', '.created-link', function(event) 
{ 
    event.preventDefault(); 

    // Your normal onclick code 
}); 

Answer 2

Có vẻ như liên kết với # as href không hoạt động. Chỉ cần chăm sóc này. :)

Answer 3

chỉ để chia sẻ những phát hiện và giải pháp của mình, tôi có cùng một vấn đề sau khi tải lại AJAX $ (tài liệu). Hàm không được gọi là cho vấn đề này tôi đã sử dụng kết hợp hai câu trả lời này, và cuối cùng tìm thấy một giải pháp rất đơn giản

• from this thread the answer from David Barker
• from another thread the answer from Nick Young

giải pháp của tôi trông như thế này

0.123.

<script type="text/javascript"> 
function initialise(){ 
    $('.clickableItem').click(function(){ 
     /* do code here */ 
     return false; 
    }); 
}; 
$(document).ready(function(){ 
    initialise(); 
}); 
$(document).ajaxComplete(function() { 
    initialise(); 
}); 
</script> 

hy vọng điều này sẽ giúp ai đó