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