ShareThis - AJAX 内容不工作后加载的按钮

Posted 2023-02-24

【中文标题】ShareThis - AJAX 内容不工作后加载的按钮

【英文标题】：ShareThis - Buttons loaded after AJAX content not working

【发布时间】：2014-08-15 04:47:58

【问题描述】：

该站点是使用 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 中，我将以下脚本绑定到加载内容的单击事件：

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

但是，虽然按钮生成正确，但它们似乎没有绑定任何事件处理程序；点击它们什么都不做。我试过不检查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);
);

任何想法出了什么问题以及我可以做些什么来让它工作？

【参考方案1】：

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

要解决此问题，您需要使用jQuery Delegate Function。这也适用于“未来元素”，即之后使用例如 Ajax 加载的元素。

【讨论】：

我想了很多，但是如果我不知道 ShareThis 在点击事件上调用的函数，我该如何使用 Delegate？此外，我认为在加载内容后重新初始化按钮会在新内容上建立处理程序。

抱歉，没关系，我意识到脚本运行良好，但我的 CSS 确实阻止了按钮上的点击事件。