jQuery - document.ready không kích hoạt khi nội dung được tải bằng AJAX

Question

Tôi có một mô-đun tab tùy chỉnh đơn giản, tải các tab có yêu cầu AJAX (qua số $(elem).load()). Trên mỗi trang được tải bằng AJAX, tôi có một số JavaScript. Lần đầu tiên trang tải (thông qua đầu vào trực tiếp của URL, chứ không phải AJAX), javascript sẽ kích hoạt hoàn hảo. Khi tôi điều hướng khỏi trang thông qua các tab AJAX, các javascripts từ các trang không tải nữa.

Có cách nào tôi có thể buộc họ thực hiện không?

(The javascript mà không bắn được đặt trong một hàm $(document).ready() nếu điều đó giúp)

Answer 1

Bạn cần phải sử dụng callback của load() chức năng:

$(elem).load('source.html', function() { 
    // here you need to perofrm something what you need 
    ActionOnDocumentReady(); 
}); 

Bạn có thể đặt tất cả các hành động của bạn trong $(document).ready vào một số chức năng (ví dụ: ActionOnDocumentReady()) và gọi nó theo số load() gọi lại.

Answer 2

sự kiện domeready chỉ kích hoạt khi dom ban đầu sẵn sàng (như tên và đề xuất jquery-api).

nếu bạn muốn sử dụng tải jquerys() và kích hoạt chức năng nếu quá trình tải đó đã được thực hiện, bạn sẽ phải sử dụng chức năng gọi lại (according to the api).

nếu bạn muốn làm điều tương tự trên domready và tải các sự kiện, cách tốt nhất là để xác định một chức năng mới cho rằng:

function dostuff(){ 
    // do some stuff here 
} 

và bắn chức năng này trong cả hai trường hợp:

$(function(){ // domready | shortcut for "$(document).ready()" 
    dostuff(); 
}) 

$('#something').load('script.php', function() { // callback on load() 
    dostuff(); 
}); 

Answer 3

Đặt mã $(document).ready() của bạn bằng một phương pháp mới. Cho phép gọi nó là methodA. Bây giờ hãy gọi số này methodA từ $(document).ready(). Thứ hai, gọi phương thức tương tự sau khi yêu cầu ajax thành công. Điều đó sẽ giải quyết vấn đề của bạn.