Các tập lệnh bị tước với jQuery .load

Question

Tôi không nghĩ câu hỏi này đã được đặt ra trước đây, ít nhất là không theo cách tôi cần câu trả lời. Tôi đang sử dụng chức năng .load của jQuery. Tôi gặp sự cố khi chỉ tải các đoạn trang.

Khi sử dụng một cái gì đó như:

$('#content').load('loadTest.html'); 

Tất cả các kịch bản trên tải loadTest.html tốt. Tuy nhiên, khi những mảnh tải trang như thế này:

$('#content').load('loadTest.html #content'); 

các kịch bản được tước ra trước khi DOM được cập nhật

này được ghi chép lại rõ ràng trong http://api.jquery.com/load/ mà nói:

Lưu ý:Khi gọi .load() bằng cách sử dụng một URL mà không có biểu thức chọn hậu tố, nội dung được chuyển tới .html() trước khi các tập lệnh bị xóa. Điều này thực hiện các khối tập lệnh trước khi chúng bị loại bỏ. Tuy nhiên, nếu .load() được gọi với biểu thức chọn được nối vào URL, các tập lệnh sẽ bị loại bỏ trước khi DOM được cập nhật, đó là lý do tại sao chúng không bao giờ được thực hiện. Ví dụ về cả hai trường hợp có thể được xem bên dưới:

Tôi hiểu rằng tôi chỉ có thể tải tập lệnh bên ngoài có thể được sử dụng ở mọi nơi, nhưng tôi đang sử dụng hệ thống ajax trên toàn trang nơi mọi thứ được tải tự động. Vì vậy, tôi không thực sự cảm thấy như có tất cả các chức năng javascript duy nhất mà tôi sẽ bao giờ viết (100's tại thời điểm này) trong các tập tin bên ngoài. Đặc biệt là vì một số hàm javascript này được tạo từ các giá trị được nạp từ một cơ sở dữ liệu mà tôi không thể giải thích trong tệp .js.

Có cách giải quyết nào cho các tập lệnh bị xóa trước khi cập nhật DOM không? Tôi có thể theo cách nào đó tải chúng theo cách thủ công không? Bất kỳ ví dụ nhỏ nào cũng hữu ích cho tôi.

Answer 1

Như bạn đã nói. jQuery trích xuất phần tử đó trước khi thực thi chỉ khối đó.

Bạn có thể sửa đổi đầu ra để máy chủ trả về dữ liệu theo định dạng bạn cần hoặc chỉ cần viết của riêng bạn. Nó sẽ trích xuất các phần tử bạn cần chúng xuất chúng ra DOM.

chưa được kiểm tra, nhưng nó sẽ là dọc theo dòng này ..

$('#content').load('loadTest.html #content,script'); 

Từ bộ nhớ này có hiệu lực hơn ..

$.get('loadTest.html',function(r){ 
    var els = $(r).find('#content,script'); 
    $('#content').html(els); 
}); 

Answer 2

Sau khi bình luận của bạn tôi nghĩ bạn có thể quan tâm cái gì đó như js/css lazyload. Nó có điều kiện tải các tập lệnh, tôi đang sử dụng nó trên một số trang web nhỏ hơn để chỉ tải các tập lệnh và CSS khi tôi cần chúng trên các trang phụ hoặc tương tác người dùng khác nhau.

Bạn tải nó một phát vào đầu:

<script src="js/lazyload-min.js" type="text/javascript"></script> 

Và sau đó bạn có thể tải tập lệnh bất cứ khi nào bạn cần đến chúng tự động, một trong nhiều ví dụ:

// Load a single JavaScript file and execute a callback when it finishes. 
LazyLoad.js('http://example.com/foo.js', function() { 
    alert('foo.js has been loaded'); 
}); 

trình cho các tập tin CSS, quá .

Điều này có thể hữu ích trong trường hợp của bạn, tuy nhiên, điều này cũng có thể thay đổi logic tải của bạn. Trong mọi trường hợp, tôi nghĩ rằng bình thường bạn nên có nhiều điểm cuối AJAX trên máy chủ của bạn mà sẽ chỉ trả lại dữ liệu bạn yêu cầu. Nếu không thì mọi thứ có thể trở nên cụ thể và thậm chí còn phức tạp.

Vì vậy, nhiều nhận xét hơn câu trả lời thực sự.