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 で使用できないということです。これが、接着が行われていない理由です。

どうすればこれを達成できるか知っている人はいますか?

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 に答える