多个ZeroClipboard剪辑实例无法正常工作

时间:2015-02-14 15:27:01

标签: javascript jquery zeroclipboard

我不知道我在下面的代码中做错了什么,当我点击动态注入的复制代码时,我只得到最后一个值(文本264)。在所有按钮上。你能指出我错在哪里吗?感谢任何帮助。

<div id="keylist">
       <p>Copy the code and insert into your homepage to display</p>

        <div class"row">

                     
            <pre> Text 1 </pre>
        </div>
        <div class"row">

                     
            <pre> Text 2 </pre>
        </div>
        <div class"row">

                     
            <pre> Text 4 </pre>
        </div>
        <div class"row">

                    
            <pre> Text 9 </pre>
        </div>
        <div class"row">

                      
            <pre> Text 264 </pre>
        </div>

   
</div>


<script language="JavaScript">
    $(document).ready(function () {
       
        ZeroClipboard.setDefaults({ moviePath: '/Content/ZeroClipboard.swf' });
        var preNum = 1

        $('pre').each(function () {
            // Get a unique id for the element I will be inserting
            var id = 'copy-btn-' + preNum++
            // Capture the text to be copied to the clipboard
            var text = $(this).text()
           
            // Insert the element, just before this
            $('<div class="copy-btn" id="' + id + '-cont"><a class="icon-file icon-white" id="' + id + '">Copy Code</a></div>').insertBefore(this)
            // Capture the newly inserted element
            var elem = $(this).prev()
          
            // Create the clip, and glue it to the element
            var clip = new ZeroClipboard();


             clip.setText(text);

            clip.glue(elem[0]);
           
        })


    });
</script>

1 个答案:

答案 0 :(得分:1)

ZeroClipboard 2.x相当改变了API

使用ZeroClipboard 2.2.0(确保更新ZeroClipboard&#39; .js.swf文件:

ZeroClipboard.config({ swfPath: '/Content/ZeroClipboard.swf' });

$(document).ready(function () {
    $('pre').each(function () {
        // Get the text to be copied to the clipboard
        var text = $(this).text();

        // Create the copy button
        var $copyBtn = $('<div class="copy-btn"><a class="icon-file icon-white">Copy Code</a></div>')
            .attr('data-clipboard-text', text) // set the text to be copied
            .insertBefore(this); // insert copy button before <pre>

        // Create the clip, and glue it to the copy button
        new ZeroClipboard($copyBtn);
    });
});

我还清理了一些代码,ID似乎没必要。