5

我正在尝试编写一个基本的博客平台，我想为用户提供将 pre 块中的代码复制到剪贴板的能力。

我正在使用ZeroClipboard来实现这一点。文档准备好后，我循环浏览pre页面上的每个内容，向其中添加一个剪贴板项目，如下所示：

    $(document).ready(function() {

        ZeroClipboard.setMoviePath( 'ZeroClipboard/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"><i class="icon-file icon-white" id="' + id + '"></i></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.Client();
            clip.setText(text)
            clip.glue(elem)
       })
   });

当我尝试这样做时，javascript 控制台报告：Uncaught TypeError: Cannot read property 'zIndex' of undefined

我目前对该问题的理解是，当我尝试将剪辑粘贴到 dom 时，插入的元素在 dom 中尚不可用，这就是没有发生粘合的原因。

有人知道我怎么能做到这一点吗？

4

1 回答 1

2

从粘合说明：

您可以传入一个 DOM 元素 ID（如上所示），或对实际 DOM 元素对象本身的引用。

您的代码不起作用，因为您将 jQuery 对象传递给它。

您可以传递 ID：

clip.glue(id + '-cont')

或者一个实际的 DOM 元素引用：

clip.glue(elem[0])

上面的示例使用.get()jQuery 对象方法的简写。

于 2012-10-27T00:27:02.350 回答