Реализация Clipboard.js на динамически добавленных элементах с jQuery

Question

Мне интересно, как использовать функциональность Clipboard.js при динамическом добавлении контента с помощью jQuery. В настоящее время мой код выглядит следующим образом, который работает при статическом на странице, загруженной без JQuery:

<div class="snippet"><div id="title">TEXT TO COPY</div></div> 

Когда я загружаю это как динамическое добавление с помощью JQuery я делаю следующее, который не работает:

var content = '<div class="snippet"><div id="title">TEXT TO COPY</div></div>'; 
$('#profilesTable').append(content); 

Я пробовал:

new Clipboard('.snippet'); 

после загрузки содержимого, но это не работает, а также то, что было сказано на странице Clipborad.js для расширенного использования:

new Clipboard('.snippet', { 
    target: function(trigger) { 
     return trigger.nextElementSibling; 
    } 
}); 

Это, похоже, не работает. Что мне недостает после того, как я динамически добавляю свой контент?

Я посмотрел Understanding non-functioning Clipboard.js implementation with AJAX, но это не дает ответа.

Благодаря

Answer 1

Спасибо за информацию всем,

Моя текущая проблема была из-за не с помощью кнопки, я хотел бы использовать опцию подсказке же парения, что отображается на сайте копирования в div. Так что мне нужно было загрузить jQuery в каждый файл javascript, который я использовал, вызвав функцию:

var getSnippets = function() { 
    var a = document.querySelectorAll(".snippet"); 
    [].forEach.call(a, function(a) { 
     a.firstChild.insertAdjacentHTML("beforebegin", '<button class="btn copy" data-clipboard-snippet><img class="clippy" width="15" src="scripts/plugins/copy/clippy.svg" alt="Copy to clipboard"></button>') 
    }); 
    var b = new Clipboard("[data-clipboard-snippet]", { 
     target: function(a) { 
      return a.nextElementSibling 
     } 
    }); 
    b.on("success", function(a) { 
     a.clearSelection(), showTooltip(a.trigger, "Copied!") 
    }), b.on("error", function(a) { 
     showTooltip(a.trigger, fallbackMessage(a.action)) 
    }) 
}; 

Answer 2

Я получил эту работу с динамически добавленным контентом, может быть, это дает вам некоторое представление о решении вашей проблемы точной реализации? В основном, когда я нажимаю на кнопку, она копирует текст в буфер обмена.

var body = $('body'); 
var content = '<div class="snippet"><div id="title">TEXT TO COPY</div></div>'; 
var btn = '<button class="btn" id="snipButton" data-clipboard-target="#title">Copy to clipboard</button>'; 
body.append(content); 
body.append(btn); 
var clipboard = new Clipboard('#snipButton'); 

Вот ссылка на jsbin: http://jsbin.com/jukigakafu/edit?html,js,console,output