Twitter按鈕正在創建多個按鈕

Question

我在我的網站（http://conn3cted.uk.tn/quote.html）上使用Twitter createShareButton，但每次按下「新報價」按鈕時，都會創建一個新的Twitter按鈕，並留下多個按鈕（例如，如果「新報價」按鈕被按下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); 
    }); 


}); 

Answer 1

這是因爲您在$.getJSON成功回調中創建了推文按鈕。所以每次加載報價時，都會創建一個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", 
      } 
    ); 
    }); 
}; 

Answer 2

你的Twitter分享按鈕的代碼是getQuote函數內部 - 所以每次.regenButton被點擊，getQuote叫，給你另一個按鈕。

Answer 3

對於任何遇到此文章的人;我正在研究這個問題，並發現了一種不使用Twitter Widget的方式創建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> 

然後設置jQuery來修改它的每一個新的報價...

/* 
* 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()));