Twitterボタンで複数のボタンが作成されています

Question

私は自分のサイトにのTwitter createShareButtonを使っていますが、「新しい見積もり」ボタンを押すたびに新しいTwitterボタンが作成されます。 「New Quote」ボタンを10回押すと、10個の共有ボタンが表示されます）。

2、3日前にうまくいきましたので、何が起こったのかは分かりません。

マイ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ボタンを作成したからです。したがって、見積もりが読み込まれるたびに、Twitterボタンが作成されます。

最高の解決策は、ボタンを一度作成し、見積もりがロードされるたびに共有テキストを更新することです。私はドキュメントで見つけることができません。だから私の最高の推測は、前の1つを最初に削除することです：

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ウィジェットを使わずにTwitter Shareボタンを作成する方法を発見しました。

タグを作成する必要がまず...

<!-- 
- 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()));