javascript - ZeroClipboard 剪辑的多个实例不起作用

Question

我不知道我在下面的代码中做错了什么，当我单击动态注入(inject)的复制代码时，我只得到最后一个值，即(文本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>

Answer 1

ZeroClipboard 2.x 更改了 API相当多。

使用 ZeroClipboard 2.2.0(确保更新 ZeroClipboard 的 .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 似乎没有必要。