2012-04-17 50 views
1

我有一個div,我想通過jQuery加載twitter分享按鈕。腳本在頁面加載時執行的作品。但之後,當我手動執行該腳本似乎並未加載。無法通過Javascript加載twitter分享按鈕

原始狀態按鈕:

<a href="https://twitter.com/share" class="twitter-share-button" data-via="givestreamuk">Tweet</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

我嘗試了加載通過jQuery整個按鈕(鏈接加上腳本),但它沒有工作,我剛收到的鏈接。相反,我試圖注入腳本到這樣的DOM:

這裏是我的JS:

var twitter = '<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://customer-url" data-via="givestreamuk" data-hashtags="socialgiving">Tweet</a>'; 
jQuery('#twitter_share').html(twitter); 

var jstext = '!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");'; 

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.text = jstext; 
jQuery('#twitter_share').append(script); 

我的DIV的按鈕被放置在:

<div id="twitter_share"></div> 

這工作時,腳本在頁面加載時執行,但之後手動只有鏈接出現在div中。

任何人都可以建議如何手動加載到DIV這個按鈕,並讓腳本執行,所以按鈕生成?

+0

的情況下,任何人都在問我爲什麼要這麼做。每次加載時,我需要更改'''data-url =「http:// customer-url」'''...... – iamjonesy 2012-04-17 13:04:19

+0

只需在JSFiddle中運行此代碼。它適用於我:http://jsfiddle.net/qtkdH/ – 2012-04-17 19:15:40

+0

@JonnyBurger是的,你是對的。哼。某物必須在某處干擾 – iamjonesy 2012-04-18 08:25:26

回答

2

您是否在項目中使用Turbolinks,PJAX或其他類似的寶石?如果是這樣,請參閱此主題:

https://github.com/rails/turbolinks/issues/25 

這些解決方案:

http://www.blackfishweb.com/blog/asynchronously-loading-twitter-google-facebook-and-linkedin-buttons-and-widgets-ajax-bonus 

http://reed.github.com/turbolinks-compatibility/facebook.html 
0

如果插入內容dinamically Twitter的腳本必須進行修改,因爲只有第一個部件將正確加載。

對於新的Twitter按鈕,ID爲twitter-wjs的腳本標記已存在,並且if(!d.getElementById(id))將返回false

,以迫使Twitter的Widget對象以檢測新的元素只需添加一個else的聲明,說明if

<script> 
!function(d,s,id) 
{ 
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https'; 

    if(!d.getElementById(id)) 
    { 
     js=d.createElement(s); 
     js.id=id; 
     js.src=p+'://platform.twitter.com/widgets.js'; 
     js.parentNode.insertBefore(js,fjs); 
    } 
    else 
    { 
     twttr.widgets.load(); 
    } 
}(document, 'script', 'twitter-wjs'); 
</script> 

來源:https://dev.twitter.com/web/javascript/initialization