Làm thế nào tôi có thể dán() một clip ZeroClipboard vào một phần tử mới được chèn vào?

Question

Tôi đang cố gắng viết một nền tảng viết blog cơ bản và tôi muốn cung cấp cho người dùng khả năng sao chép mã trong một khối trước vào khay nhớ tạm của họ.

Tôi đang sử dụng ZeroClipboard để đạt được điều này. Một khi các tài liệu đã sẵn sàng, tôi lặp qua mỗi pre trên trang web, thêm một mục vào clipboard để nó như sau:

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

Khi tôi cố gắng để làm điều này, giao diện điều khiển báo cáo javascript: Uncaught TypeError: Cannot read property 'zIndex' of undefined

My hiện tại sự hiểu biết của vấn đề là phần tử chèn vào chưa có sẵn trong dom khi tôi cố gắng dán đoạn clip vào nó, đó là lý do tại sao không dán nào xảy ra.

Bất kỳ ai biết cách tôi có thể thực hiện việc này?

Answer 1

Từ Gluing instructions:

Bạn có thể vượt qua trong một ID phần tử DOM (như hình trên), hoặc một tham chiếu đến đối tượng phần tử DOM thực tế bản thân.

Mã của bạn không hoạt động vì bạn đang chuyển đối tượng jQuery vào nó.

Bạn có thể vượt qua ID:

clip.glue(id + '-cont') 

Hoặc một tài liệu tham khảo phần tử DOM thực tế:

clip.glue(elem[0]) 

Ví dụ trên sử dụng viết tắt cho các .get() phương pháp đối tượng jQuery.