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

【问题标题】：Triggering a function after an element has been fully loaded onto the page在元素完全加载到页面后触发函数
【发布时间】：2014-10-18 15:18:33
【问题描述】：

想知道是否有人可以提供帮助，因为没有人给出解决这个问题的方法！

如何等待动态加载的元素（例如，另一个 .html 页面的特定 div）首先完全加载，然后才能触发函数？

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

有什么想法吗？

非常感谢！

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

要加载的Div：

<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);
}
});

【问题讨论】：

通常你使用插入元素的方法的回调。提供一些执行动态元素插入的代码。如果您只需要事件绑定，则可以使用事件委托方法。总的来说，这个问题太模糊了
我认为最简单的方法是在加载 .html 页面的末尾运行 Javascript。我不确定您是如何加载文件的，或者我可以提供更多帮助。
另一个 div 是如何加载的？如果您向我们展示导致加载 div 的代码，我们可以向您展示如何在加载完成后执行某些操作。
查看我的更新，谢谢！

标签： jquery jquery-load jquery-trigger

【解决方案1】：

.ready() 是你要找的吗？

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

【讨论】：

这不是一个答案，它是一个评论，应该放在评论区并删除答案
@charlietfl 我没有足够的代表发表评论。为了将来参考，在我有足够的代表之前，我将如何向 OP 提出我的建议？

【解决方案2】：

我发现这对我有用，我的脚本代码更短更简单，我将它附加到 body 元素，并转义了特殊字符。

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

代码会添加在body的底部，所以你可以确保访问dom中动态加载的元素。

【讨论】：