jQuery延迟点击后“复制”文本

我有一个页面，用户点击一个按钮（“生成”）动态生成随机短语使用从json文件拉的文本。该短语放置在一个div（#generated）中，替换之前存在的内容（单击按钮之前）。生成这个短语完美无缺。我现在要添加的内容是用户点击推文按钮分享该短语的一种方式。jQuery延迟点击后“复制”文本

这里的鸣叫按钮代码：

<div id="tweet_button"> 
<a href="http://twitter.com/share" 
class="twitter-share-button" 
data-text="This is what we want to change dynamically" 
data-count="none">Tweet</a></div>

加上这头：

<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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

的data-text就是我正在寻找后的按钮使用div的内容鸣叫按下。这里是我的问题：

首先，如果尝试这个办法：

$(document).ready(function(){ 
$.getScript('http://platform.twitter.com/widgets.js'); 
$('a[data-text]').each(function(){ 
$(this).attr('data-text', $('#generated').text()); 
}); 
});

那当然，从“这是我们要动态地改变”什么是在div“生成”以前data-text变化按钮被按下（即文档准备好时有什么），这不是我想要的。所以，我想我可以利用这个代码，并data-text将改变到div的新生成的内容：

$("generate").click(function() { 
setTimeout(function(){ 
$.getScript('http://platform.twitter.com/widgets.js'); 
$('a[data-text]').each(function(){ 
$(this).attr('data-text', $('#generated').text()); 
}); 
}, 
1000); 
});

在我看来，这会等到“生成”按钮被点击，一秒钟的延迟（以确保div内容更改），然后用div的新内容更新data-text。当然，这是行不通的。

理想情况下，每次单击“生成”按钮时都会更新data-text。似乎可能有办法做到这一点（https://dev.twitter.com/discussions/890）的一部分，但现在我只是担心如上所述的第一部分。

希望这是有道理的...任何想法如何实际做到这一点？感谢这位新手的支持。

来源

2013-06-28 jonmrich

你为什么在这里使用$ .getScript？我不明白 –

事后看来，可能不需要这一行，因为我在标题中有这个完整的twitter脚本，但是你认为这是问题吗？我删除了该行，并没有产生任何影响。 – jonmrich

当然，你不应该加载脚本两次，但我不认为它是你的问题。事实上，我不太了解你的问题。您应该将您的点击处理程序包装在文档中。检查你的点击事件是否被解雇。但是，从哪里来的动态文本，以及如何？ –

我弄得像 “再生” 鸣叫按钮：

http://jsfiddle.net/mattydsw/xAq5t/

$("#generate").click(function() { 
    $("#tweet_button").empty(); 
    $("#tweet_button").append('<a href="http://twitter.com/share" class="twitter-share-button" data-text="' + $('#generated').text() + '" data-count="none">Tweet</a>'); 
    twttr.widgets.load(); 
});

当然，你应该调整它，因为你用AJAX功能改变 “#generated”

的文本编辑

也许是这样的

$("#generate").click(function() { 
    $('#generated').load('data.txt', function() { 
     $("#tweet_button").empty(); 
     $("#tweet_button").append('<a href="http://twitter.com/share" class="twitter-share-button" data-text="' + $('#generated').text() + '" data-count="none">Tweet</a>'); 
     twttr.widgets.load(); 
    }); 
});

来源

2013-06-28 13:09:52 mkutyba

单击“生成”后文本应该更改。 – mkutyba

我现在看到。它在小提琴中为我工作，但我无法在我的网页中工作。添加了获取最新jquery（“jquery-latest.min.js”）的调用，但我显然错过了一些东西。我在小提琴的“Frameworks＆Extensions”部分看到，jquery设置为“onLoad”。我的版本显然不是这样做的。如何将该部分添加到我自己的代码中以匹配与小提琴相同的动作？ – jonmrich

http://learn.jquery.com/using-jquery-core/document-ready/ – mkutyba

jQuery延迟点击后“复制”文本

回答

相关问题