如何在Ajax中使用剪贴板.js?(数据剪贴板)

Question

我有剪贴板.js在我的测试站点上运行良好，我可以使用数据剪贴板进行复制。

<a href="#">
<i class="icon-link icon-1x fa-fw" id="d_clip_button_x" data-clipboard-text="copythistext" title="Copy direct link"></i></a>
<script  type="text/javascript" src="copy/clipboard.min.js"></script>
<script  type="text/javascript"> var client = new Clipboard(  document.getElementById('d_clip_button_x') );</script>

但是当我有来自 Ajax 调用的内容时，相同的代码不再起作用。我已经阅读了一些关于如何让Ajax与剪贴板很好地合作的方法和教程.js但我似乎无法理解它。据我了解，我需要重新触发该功能，但是我该如何实现呢？

谢谢。

Answer 1

我尝试了剪贴板.js使用广泛的触发器来获取data属性，并在页面完成加载时绑定。因此，如果数据是从Ajax获取的，剪贴板不会像您希望的那样绑定它们。对于解决方案，这是诀窍。首先，制作一个通用的复制按钮，给它一个ID，假设我们给出的是d_clip_button_villa_XXX。

<a style="display:none" href="javascript:void(0);"> <i class="icon-link icon-1x fa-fw" id="d_clip_button_villa_XXX" data-clipboard-text="" title="Copy direct link"> </i> </a> <script type="text/javascript"> var client = new Clipboard( document.getElementById('d_clip_button_villa_XXX') ); </script>

现在，不要制作相同的按钮，而是使用任何元素，例如 <a> 标签并提及 2 个事件 ->

<a href="#" onmouseover="copytxt('here is the text')" onclick="clkd(); return false;">copy</a>

现在做两个函数——>

function copytxt(txt){ 
jQuery('#d_clip_button_villa_XXX').attr('data-clipboard-text', txt); 
} 
function clkd(){ 
jQuery('#d_clip_button_villa_XXX').click(); 
}

这也将适用于 Ajax