在元素完全加载到页面后触发函数

Question

想知道是否有人能帮忙，因为没有人给出这个问题的解决方案！

如何等待一个动态加载的元素（例如，另一个.html页面的特定div）首先被完全加载，这样你就可以触发一个函数，而且只能触发一个？

.load显然不会像OP所指出的那样工作邮递

有什么想法吗？

非常感谢！

更新：更多信息：我正在使用.load从另一个页面加载一个div元素，该元素包含供Galleria使用的数据（使用.load的回调执行）。我目前使用setTimeout来确保div被加载，这样Galleria就不会加载得太快和空。但我不喜欢setTimeout业务，它太像是一个拼凑的解决方案。

要加载的分区：

<div id="source1" class="container">
 <div class="thumbnails"><a href="images/gallery/recent/7.jpg"><img src="images/navigation/recent/7.jpg"/></a></div>
 <div class="thumbnails"><a href="images/gallery/recent/6.jpg"><img src="images/navigation/recent/6.jpg"/></a></div>
 <div class="thumbnails"><a href="images/gallery/recent/5.jpg"><img src="images/navigation/recent/5.jpg"/></a></div>
 <div class="thumbnails"><a href="images/gallery/recent/4.jpg"><img src="images/navigation/recent/4.jpg"/></a></div>
</div>
<div id="source2" class="container">
 <div class="thumbnails"><a href="images/gallery/recent/3.jpg"><img src="images/navigation/recent/3.jpg"/></a></div>
 <div class="thumbnails"><a href="images/gallery/recent/2.jpg"><img src="images/navigation/recent/2.jpg"/></a></div>
 <div class="thumbnails"><a href="images/gallery/recent/1.jpg"><img src="images/navigation/recent/1.jpg"/></a></div>
</div>

脚本的一部分：

$(document).on("click", "#menu", function(event) {
event.preventDefault();
var link = this.hash;
var ref = this.hash.replace("#", "") + ".html " + link;
var deferred2 = $.Deferred();
goLoad();
function goLoad(){
  switch(link){
    case "#recent":
     $("#recent").css("height", window.innerHeight);
     $("#recent").load(ref + " > *", null, goRecent());
    break;
  /*..other cases...*/
  }
};
function goRecent(){
  setTimeout(function(){
    deferred2.resolve();
    deferred2.done(doGallerySize, doGallery, goScroll)
    function doGallerySize(){
      $("#gallery").css("height", window.innerHeight);    
    }
    function doGallery(){
      Galleria.run("#galleria",{
        dataSource:"#source1, #source2",
        keepSource:true,
        responsive:true,
        thumbnails:false
      });
    }
    function goScroll(){
      $.smoothScroll({
          scrollTarget: link,
          afterScroll: function() {
            $(".stickynav").sticky({topSpacing:0});}
      });
    }
  }, 100);
}
});

Answer 1

Is.ready（）您正在寻找什么？

http://api.jquery.com/ready/

Answer 2

我发现这对我来说很有效，我的脚本代码更简短，我把它附加到body元素中，并对特殊字符进行转义。

$('body').append('<script>var targetObj = $("#elementId"); var initialText = targetObj.text(); targetObj.text(initialText.replace(/\|.(\w|\W)+/g, ""));</script>')

代码将添加在主体的底部，因此您可以确保访问dom中动态加载的元素。