Come posso incollare() una clip ZeroClipboard su un elemento appena inserito?

Question

Sto provando a scrivere una piattaforma di blogging di base e voglio offrire agli utenti la possibilità di copiare il codice all'interno di un blocco pre negli appunti.

Sto usando ZeroClipboard per raggiungere questo obiettivo. Una volta che il documento è pronto, io ciclo attraverso ogni pre sulla pagina, aggiungendo un elemento di appunti come segue:

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

Quando provo a fare questo, i rapporti console JavaScript: Uncaught TypeError: Cannot read property 'zIndex' of undefined

Il mio attuale la comprensione del problema è che l'elemento inserito non è ancora disponibile nella dom quando provo ad incollare la clip ad esso, motivo per cui non si sta verificando l'incollatura.

Qualcuno sa come potrei essere in grado di realizzare questo?

Answer 1

Dal Gluing instructions:

È possibile passare in un ID elemento DOM (come mostrato sopra), oppure un riferimento l'oggetto effettivo elemento DOM stessa.

Il tuo codice non funziona perché stai passando un oggetto jQuery ad esso.

È possibile passare l'ID:

clip.glue(id + '-cont') 

O un riferimento effettivo elemento DOM:

clip.glue(elem[0]) 

L'esempio precedente utilizza la scorciatoia per il metodo oggetto .get() jQuery.