在页面加载后元素出现时调用jQuery函数

Question

我正在使用提供自定义滚动条的jQuery扩展程序。通常会这样调用：

$("#thoughtsArticle #recentPosts").mCustomScrollbar();

但在这种情况下，当页面加载时，需要受影响的元素不存在。它似乎是用户输入的结果。当元素出现在页面上时，如何执行此jQuery？

通过谷歌搜索，我发现我需要使用委托活动，但我没有找到任何可以直接应用于我的案例的例子。大多数例子都是表格提交等事件。

编辑：

我不认为我已经正确地解释了我正在寻找的东西。如果你看一下我的webpage here，那么在页面加载时，“博客”就可以了。部分不存在。如果单击导航栏中的“我的博客”，它将仅使用AJAX重新加载页面的一部分。您将在博客部分看到我右侧有一个Recent Posts块。我想将自定义滚动条应用于该部分。

我上面发布的代码目前在$(document ).ready()脚本中与jQuery的其余部分一起使用，但由于目标元素在页面加载时不存在，因此不会应用自定义滚动条。

我尝试使用上面的jQuery在博客页面上添加<script>标记，但它似乎没有任何效果。

我在网上搜索了一下，我认为我需要使用的是委托活动？不确定，但无论哪种方式，我都不知道在这种情况下如何使用它，因为我找不到的例子似乎都适用于我的情况。

Answer 1

文档完全加载时将触发此脚本。然后它会在将要应用的文档上添加委托.mCustomScrollbar();我有点担心在这一点之后它会“准备好”，但您可以尝试其他生命周期事件，或者立即应用它而不需要委托，因为它文档准备就绪后，您的控件可能已在页面上。

$(function(){
    $(document).on('ready','#thoughtsArticle #recentPosts',function(){
        $(this).mCustomScrollbar();
    })
})