如何在Ajax中使用剪贴板.js？ （数据剪贴板）

Question

我在测试站点上的Clipboard.js运行良好，可以使用data-clipboard进行复制。

<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与Clipboard.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个events->

<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一起使用