Javascript Twitter按钮正在创建多个按钮

我在我的网站（）上使用TwittercreateShareButton，但每次按下“New Quote”按钮，它都会创建一个新的Twitter按钮，给我留下多个按钮（例如，如果按下“New Quote”按钮10次，将有10个共享按钮）

前几天还不错，所以不知道到底发生了什么

下面是我的JavaScript

// Random Quote Generator
$(document).ready(function() {
  // Set the default values for future AJAX requests
  $.ajaxSetup({
    // Prevent all future AJAX requests from being cached. 
    cache: false
  });
  // API URL
  var quoteURL = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
  // getQuote function, which accepts a data parameter. 
  var getQuote = function(data) {
    // Replace the html of the targeted element with the returned content field.
    $(".quoteContent").html(data[0].content);
    // Replace the html of the targeted element with the returned title field.
    $(".quoteTitle").html('Author: ' + data[0].title);
    newColor();

    twttr.ready(function() {
        // Use the pre-made createShareButton function
        twttr.widgets.createShareButton(
            // Do not share a URL
            " ",
            // Div where the share button should be inserted
            document.getElementById('tweetButton'),
            {
                // Define the tweet that will be used
                text: "'" + $(".quoteContent").text().replace(/(\r\n|\n|\r)/gm,"") + "'\n" +
                $(".quoteTitle").text(),
                // Set the size of the Twitter share button
                size: "large",
            }
        );
    });
  };

  var newColor = function() {
    var color = Please.make_color();
    $("body, button, .btn").css("background-color",color);  
    $("p, blockquote").css("color",color);
  };

  /*  
  * On every page load get JSON data from the URL, defined in the
  * 'url' variable, and then run the getQuote function 
  */
  $.getJSON(quoteURL, getQuote);
 //newColor();

 /*  
  * When the button is clicked load get JSON data from the   * URL,defined in the 'url' variable, and then run the
  * getQuote function.
  */
  $(".regenButton").click(function() {
    $.getJSON(quoteURL, getQuote);
  });


});

---

您的twitter共享按钮代码位于

getQuote

函数中-因此每次单击

.regenButton

，都会调用

getQuote

，为您提供另一个按钮。

这是因为您在

$.getJSON

成功回调中创建了twitter按钮。因此，每次加载报价时，都会创建一个twitter按钮

最好的解决方案是创建一次按钮，并在每次加载报价时更新共享文本。我在文件里找不到。因此，我最好的猜测是先删除之前的一个：

var getQuote = function(data) {
  // Replace the html of the targeted element with the returned content field.
  $(".quoteContent").html(data[0].content);
  // Replace the html of the targeted element with the returned title field.
  $(".quoteTitle").html('Author: ' + data[0].title);
  newColor();

  // remove previous button
  $('.twitter-share-button').remove();

  // and create a new one
  twttr.ready(function() {
      // Use the pre-made createShareButton function
      twttr.widgets.createShareButton(
          // Do not share a URL
          " ",
          // Div where the share button should be inserted
          document.getElementById('tweetButton'),
          {
              // Define the tweet that will be used
              text: "'" + $(".quoteContent").text().replace(/(\r\n|\n|\r)/gm,"") + "'\n" +
              $(".quoteTitle").text(),
              // Set the size of the Twitter share button
              size: "large",
          }
      );
  });
};

---

对于任何一个看到这篇文章的人；我对此进行了更多的研究，发现了一种不使用Twitter小部件创建Twitter共享按钮的方法

首先，您需要创建一个标记

<!-- 
- href will create a link to the Twitter web intent composer
- target (_blank) will open the link in a new window
--> 
<a class="tweetButton" href="https://twitter.com/intent/tweet?text=Initial Text" 
                target="_blank">
<!-- Create a button for the link to interact with -->
   <button class="btn">
      Tweet
   </button>
</a>

---

啊，好吧！这是有道理的。这个功能放在哪里合适？我尝试在

$.getJSON（quoteURL，getQuote）下添加它

但它不会下拉已生成的报价。可能是因为您的twitter按钮引用了

.quoteContent

，在按下报价按钮之前，它不会包含任何内容。。。您可以在再次创建之前删除上一个twitter按钮，或者查看api，看看是否可以在之后更改其内容。感谢您的帮助：）我可以根据@PimskieAh right给出的建议删除并重新创建按钮。好的！所以它不理解它应该只创建一个——我想我把HTML小部件设置（它只创建一次）和这个按钮也不应该创建多个的事实混淆了。但这是有意义的-它正在创建一个新按钮，就像它被告知的那样，只是将它附加到指定的

div

中，我添加了额外的一行，现在一切都正常：-）谢谢！正如你所知道的，我还在学习。有时候我会犯愚蠢的错误。不客气，你现在似乎明白了问题所在！祝你好运

/*
* Amend the "href" attribute of the element with a "tweetButton" class
* (the "a" tag) to take the twitterURL Global Variable, plus the parameter 
* "text=" (which specifies what the tweet will say) and assign the value of:
*
* - the element with a class of "quoteContent", without the HTML tags 
* (.text()), removing all line breaks (.replace(/(\r\n|\n|\r)/gm,"")), 
* trims all the white space (.trim())
*
* - adds a line break (\n)
*
* - the element with a class of "quoteTitle", without the HTML tags
* (.text())
*
* Then URL encode the result (encodeURIComponent) to complete the amendment
*/
$(".tweetButton").attr("href", twitterURL + "text=" + encodeURIComponent("'" +
    $(".quoteContent").text().replace(/(\r\n|\n|\r)/gm,"").trim() +
    "'\n" + $(".quoteTitle").text()));