javascript - ShareThis - AJAX 内容后加载的按钮不起作用

Question

该网站是使用 ExpressionEngine (2.8.1) 构建的，但由于要共享的内容是通过 AJAX 加载的，因此我决定使用 ShareThis 网站上为“网站”生成的代码，而不是可能过时的 EE 插件.

因此 ShareThis 生成了以下标记，我已将其放置在通过 AJAX 加载的 EE 模板中:

<span class="st_facebook_large" displayText="Facebook"></span>
<span class="st_twitter_large" displayText="Tweet"></span>
<span class="st_pinterest_large" displayText="Pinterest"></span>
<span class="st_googleplus_large" displayText="Google +"></span>
<span class="st_email_large" displayText="Email"></span>

在标题中，我正在加载提供的脚本:

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "MY_PUBLISHER_ID", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

然后在 JS 中，我将以下脚本绑定(bind)到加载内容的单击事件:

$('#ajax-content').load('ajax/'+id, function() {
    if(window.stButtons) {
        stButtons.locateElements();
    }
}

但是，虽然按钮已正确生成，但它们似乎没有绑定(bind)任何事件处理程序；单击它们不会执行任何操作。我尝试过不检查 if(window.stButtons)，但没有什么区别。

如果我使用以下代码而不是 stButtons.locateElements();，按钮甚至不会显示:

$.getScript('http://w.sharethis.com/button/buttons.js', function(data, textStatus, jqxhr) {
    var switchTo5x = true;
    stLight.options({publisher: "MY_PUBLISHER_ID", doNotHash: false, doNotCopy: false, hashAddressBar: false});
});

有什么想法出了什么问题以及我能做些什么来让它工作吗？

Answer 1

点击事件仅适用于 DOM 加载的内容。如果在 DOM 加载后添加内容，那么这些元素将不会有 Click 事件。

要解决这个问题，您需要使用 jQuery Delegate Function 。它也适用于“Future Elements”，即后来使用 Ajax 等方式加载的元素。