jQuery:共享按钮(sharrre）在本地和服务器上都不起作用

jQuery: share buttons (sharrre) do not work locally and on the server?

本文关键字：服务器 不起作用 共享 按钮 sharrre jQuery      更新时间：2023-09-26

我正在尝试使用sharrre社交媒体共享按钮。

然而，我不明白为什么这段代码不能在本地或我的服务器上运行，但它在jsfiddle上运行得很好！

这是jsfiddle：http://jsfiddle.net/f7yobj60/

这是我的确切代码：

<html>
    <head>
    <meta charset="UTF-8">
    <title>Sharrre.com</title>
  <meta name="description" content="Sharrre" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script src="http://sharrre.com/js/jquery.sharrre-1.3.4.min.js"></script>
  <script>
$('.share-buttons').each(function() {
    $(this).sharrre({
        share: {
            twitter: true,
            facebook: true
        },
        template: '<div class="share-icon-holder"><a href="#" class="facebook"><img src="http://png-2.findicons.com/files/icons/2052/social_network/32/facebook.png" /></a><a href="#" class="twitter"><img src="http://png.findicons.com/files/icons/2052/social_network/32/twitter.png" /></a></div><div class="share-text">Share</div>',
        enableHover: false,
        enableTracking: false,
        render: function(api, options){
            $(api.element).on('click', '.twitter', function(event) {
                event.preventDefault();
                api.openPopup('twitter');
            });
            $(api.element).on('click', '.facebook', function(event) {
                event.preventDefault();
                api.openPopup('facebook');
            });
        }
    });
});
  </script>
</head>
<body>
<div class="share-buttons" data-url="http://www.google.com" data-text="Google test"></div>
<div class="share-buttons" data-url="http://www.stackoverflow.com" data-text="Stackoverflow test"></div>
<div class="share-buttons" data-url="http://www.google.com" data-text="Google test 2 - long text"></div>
<div class="share-buttons" data-url="http://www.stackoverflow.com" data-text="Stackoverflow test 245345"></div>
</body>
</html>

我的HTML页面中缺少什么吗？

我甚至从github下载了这些文件，甚至这些文件在本地或服务器上都不适用！

这是我遇到过的最奇怪的事情。

任何帮助都将不胜感激。

当您的代码运行时，按钮不存在，请将代码包装在就绪处理程序中，以便它们在运行时存在。

JSfiddle会自动为您执行此操作。。。参见左上角下拉菜单中选择的选项onload

$(function(){
  /* your code here */
});
相关文章：