Question

我的测试网站上的Clipboard.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与Clipboard.js良好协作的方法和教程，但我似乎无法理解它。据我了解，我需要重新触发该功能，但我怎样才能实现呢？

感谢。

Answer 1

我尝试了我的结局。 clipboard.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个事件 - ＆gt;

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

现在制作两个功能 - ＆gt;

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

function clkd(){ 
jQuery('#d_clip_button_villa_XXX').click(); 
}

这也适用于ajax

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

1 个答案:

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

1 个答案:

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