Wie kann ich einen ZeroClipboard-Clip an ein neu eingefügtes Element kleben()?

Question

Ich versuche eine grundlegende Blogging-Plattform zu schreiben, und ich möchte Benutzern die Möglichkeit bieten, Code innerhalb eines Pre-Blocks in ihre Zwischenablage zu kopieren.

Ich verwende ZeroClipboard, um dies zu erreichen. Sobald das Dokument fertig ist, ich Schleife durch jeden pre auf der Seite, die ein Zwischenablage Element ihn hinzufügen wie folgt:

$(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) 
     }) 
    }); 

Wenn ich versuche, dies zu tun, die JavaScript-Konsole Berichte: Uncaught TypeError: Cannot read property 'zIndex' of undefined

Meinen aktuellen Verständnis des Problems ist, dass das eingefügte Element noch nicht in der Dom verfügbar ist, wenn ich versuche, den Clip daran zu kleben, weshalb kein Kleben auftritt.

Jeder weiß, wie ich das erreichen könnte?

Answer 1

Vom Gluing instructions:

Sie in einer DOM-Elemente ID passieren können (wie oben dargestellt) oder ein Verweis auf das tatsächliche DOM-Element-Objekt selbst.

Ihr Code funktioniert nicht, weil Sie ein jQuery-Objekt an ihn übergeben.

können Sie die ID übergeben:

clip.glue(id + '-cont') 

oder eine aktuelle DOM-Element Referenz:

clip.glue(elem[0]) 

Das obige Beispiel wird mit der Abkürzung für die .get() Objektmethode jQuery.