javascript - 外部小部件加载完成时执行 JS 命令

Question

在这个问题中，我使用 addthis 小部件作为示例，但对于任何小部件来说都是如此(如果可能的话)

addthis是一个将所有社交链接添加到网页的小部件。然而，它的设计定制选项非常有限。因此，为了使其适合我的主题，我需要将 addthis 生成的 a 标记传输到我自己的 html/css 结构中。

我尝试在文档就绪时使用 JQuery 附加方法:

$(document).ready(function(){
    var addthis = $("#atftbx");
});

然而$("#atftbx")返回的数组是空的[]，这意味着jquery在页面上没有找到该元素。我假设在执行 $(document).ready 时小部件尚未加载。有什么事件我可以监听然后执行吗？还有其他方法可以做到吗？

这并不重要，但仅供引用，下面是小部件生成的示例。

<div class="addthis_custom_follow">
    <div id="atftbx" class="at-follow-tbx-element addthis-smartlayers animated at4-show">
     <p><span>    </span></p>
     <div class="addthis_toolbox addthis_default_style addthis_32x32_white_style circular">
         <a class="addthis_button_facebook_follow...">
              <span class="at300bs at15nc at15t_facebook">
                   <span class="at_a11y">Follow on Facebook</span>
             </span><span class="addthis_follow_label">Facebook</span>
         </a>
         <a class="......
         </a>

Answer 1

尝试使用这个:

function addthisReady(evt) {
    // your jQuery code
}

addthis.addEventListener('addthis.ready', addthisReady);

有关更多信息，请参阅 http://support.addthis.com/customer/portal/articles/1365497-addthis-javascript-events

编辑:

出于一般目的，我可以假设，当小部件将更改小部件容器的 HTML 时，您可以使用事件 DOMSubtreeModified 来执行代码，如下所示:

var isChanged = false;
$(".widget_container").bind("DOMSubtreeModified", function() {
    if (! isChanged) {
        isChanged = true;
        // your code
    }
});

但最好使用小部件的内置事件，因为 DOMSubtreeModified 在 IE 9 中存在错误 ( http://help.dottoro.com/ljrmcldi.php )