這種類型的代碼會一直工作嗎？

Question

$('#container').append('<div id="theonly">tests</div>').find('#theonly'); 

和

$('#container').html('<div id="theonly">tests</div>').find('#theonly'); 

我擔心有時動態生成的元素是不可用一次，我錯了沒有？

如果我沒有錯，覆蓋所有情況的解決方案是什麼？

編輯 有人能想出一個明確和統一的答案嗎？

Answer 1

在DOM的世界裏，任何人回答「是」這個問題是瘋了。

的html(val)功能可直接替換innerHTML，因此在理論上這個代碼應該總是工作，因爲#container實際上將有由當時的新的HTML代碼調用find()

然而，DOM是臭名昭著的跨越不同的表現不同瀏覽器。所以這裏的教訓是徹底的測試。

編輯： 迴應「你的解決方案是什麼？」

正如我上面所說，你應該徹底測試。功能應該按預期工作，但如果不測試主流瀏覽器，則無法確定。

這樣說的話，如果你真的想要一個具體的確認新的HTML準備好查詢，你可以設置一個輪詢，檢查當前的html()對你想設置的HTML首先。

事情是這樣的：

(function ($) { 
    $.fn.htmlX = function (html, callback) { 
     var element = this; 
     var poll = function() { 
      if (element.html() === html) { 
       callback(); 
      } else { 
       setTimeout(poll, 100); 
      } 
     }; 

     element.html(html); 
     poll(); 
    }; 

    $('#container').htmlX('<div id="theonly">tests</div>', function() { $('#container').find('#theonly').css('color', '#f00'); }); 
}(jQuery));