如何将ZeroClipboard剪辑粘贴()到新插入的元素？

Question

我正在尝试编写一个基本的博客平台,我希望为用户提供将前块内的代码复制到剪贴板的功能.

我正在使用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中可用,这就是为什么没有粘合的原因.

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

Answer 1

从粘合说明中：

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

您的代码不起作用，因为您正在向它传递一个 jQuery 对象。

您可以通过ID：

clip.glue(id + '-cont')

或者实际的 DOM 元素引用：

clip.glue(elem[0])

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