Kiểm tra xem một phần tử DOM đã cho đã sẵn sàng

Có cách nào kiểm tra xem các phần tử DOM HTML cho một bộ chọn/phần tử đã cho chưa sẵn sàng bằng cách sử dụng jQuery hay JavaScript không?Kiểm tra xem một phần tử DOM đã cho đã sẵn sàng

Nhìn vào jQuery api cho chức năng sẵn sàng, có vẻ như nó chỉ có thể được sử dụng với đối tượng tài liệu. Nếu sẵn sàng không thể được sử dụng cho mục đích này là có một cách khác để làm điều này?

ví dụ:

$('h1').ready(function() 
{ 
//do something when all h1 elements are ready 
});

Rõ ràng là tôi có thể sử dụng

$(document).ready(function() 
{ 
//do something when all h1 elements are ready 
});

Nhưng nếu tất cả các tải của h1 đầu tiên sau đó mã cụ thể đến các yếu tố h1 sẽ chỉ thực hiện sau khi toàn bộ tài liệu đã sẵn sàng mặc dù nó thực sự có thể thực hiện sớm hơn.

Nguồn

2011-07-04 8bitme

tại sao bạn muốn thực hiện nó sớm hơn so với tài liệu đã sẵn sàng? – nWorx

tôi có thể hỏi, tại sao bạn cần điều này? –

Tôi không nghĩ rằng việc tập lệnh của bạn được thực thi sớm hơn vì nó có thể cải thiện hiệu suất tổng thể của trang web của bạn, vì nói chung, việc thực thi JavaScript chặn nội dung khác tải. Đặt cược tốt nhất của bạn là sử dụng '$ (tài liệu) .ready'. – FishBasketGordo

Chỉnh sửa 2012 Phương thức live không còn được dùng như jQuery 1.7.0. Hiện tại, .on() event được đề xuất để gắn trình xử lý sự kiện. Điều này thay thế .bind(), .delegate() và .live().

Xem các tài liệu: http://api.jquery.com/on/

gốc trả lời

tôi nghĩ rằng jQuery .live() event có thể là những gì bạn đang tìm kiếm.

Nguồn

2011-07-04 13:07:56 Tsar

đây không phải là câu trả lời, nó là một liên kết tới một tài liệu . bạn có thể đặt liên kết trong nhận xét nếu bạn không muốn trả lời. – user3738936

Câu trả lời có thể là không. từ góc độ trình duyệt, nó có lẽ là một thiết kế tồi và thậm chí không thể cho phép một cái gì đó như thế này.

cho các phần tử được chèn động sau khi DOM sẵn sàng có sự kiện dom - DOMNodeInserted - bạn có thể sử dụng. bạn cũng có thể sử dụng jquery live như đã đề cập ở trên mà có thể sử dụng cùng một sự kiện.

Nguồn

2011-07-04 13:13:05

Có, điều đó là có thể: và mặc dù không phải là bản địa, nhưng nó khá dễ dàng để cấy ghép. Chỉ cần kích hoạt sự kiện tùy chỉnh sau khi nút bạn đang tìm kiếm được tải vào DOM.

Lưu ý: Tôi đang viết điều này trong jQuery, điều đó có nghĩa là bạn phải bao gồm jQuery sớm trong quá trình tải, đó là một hiệu suất không có không khôn ngoan. Điều đó đang được nói, nếu bạn đã có jQuery cao trong tài liệu của bạn hoặc nếu DOM xây dựng được một thời gian dài hella cho bạn, điều này có thể là đáng giá. Nếu không, bạn tự do viết điều này trong vanilla JS để bỏ qua $ dependency.

<!DOCTYPE HTML> 
<html><head><title>Incremental DOM Readyness Test</title></head><body> 
    <script src="/js/jquery.js"></script> 
    <script> 
     jQuery(document.body).on("DOMReady", "#header", function(e){ 
      var $header = jQuery(this); 
      $header.css({"background-color" : "tomato"}); 
     }).on("DOMReady", "#content", function(e){ 
      var $content = jQuery(this); 
      $content.css({"background-color" : "olive"}); 
     }); 
    </script> 
    <div class="header" id="header"> 
     <!-- Header stuff --> 
    </div> 
    <script>jQuery("#header").trigger("DOMReady");</script> 
    <div class="content" id="content"> 
     <!-- Body content. Whatever is in here is probably really slow if you need to do this. --> 
    </div> 
    <script>jQuery("#content").trigger("DOMReady");</script> 
</body></html>

Nguồn

2014-04-30 22:29:06 Ansikt

Đoạn mã sau đã làm việc cho tôi!

<print condition="true"></print> 

    <script> 
    $('print').load('#',function(){ 
     alert($(this).attr('condition')); 
    }); 
    </script>

Nguồn

2015-10-30 13:58:00

-------- 2016 --------

tôi đến với một giải pháp có thể sử dụng những lời hứa rằng có lẽ có thể giúp ai đó, tôi đang sử dụng jquery vì tôi lười biếng: P.

Khá nhiều đang chờ đợi cho đến khi dom tồn tại và sau đó thực hiện chức năng quyết tâm trong lời hứa:

var onDomIsRendered = function(domString) { 
    return new Promise(function(resolve, reject) { 
    function waitUntil() { 
     setTimeout(function() { 
     if($(domString).length > 0){ 
      resolve($(domString)); 
     }else { 
      waitUntil(); 
     } 
     }, 100); 
    } 
    //start the loop 
    waitUntil(); 
    }); 
}; 

//then you can use it like 
onDomIsRendered(".your-class-or-id").then(function(element){ 
    console.log(element); //your element is ready 
})

Nguồn

2016-06-29 00:34:17 ncubica

Làm thế nào khi phần tử biến mất khỏi DOM, nhưng có thể xuất hiện lại sau này? Làm thế nào tôi sẽ bắt được điều này? – paskl

Kiểm tra xem một phần tử DOM đã cho đã sẵn sàng

Trả lời

Các vấn đề liên quan