Clipboard.js 使用 jQuery 动态添加的元素的实现

Question

我想知道在使用 jQuery 动态添加内容时如何使用 Clipboard.js 功能。目前我的代码如下，如果页面上的静态加载没有 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

我使用动态添加的内容进行了此操作，也许它可以让您深入了解如何解决您的具体实施问题？基本上当我点击按钮时，它会将文本复制到剪贴板。

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 的 link：http://jsbin.com/jukigakafu/edit?html,js,console,output

Answer 2

感谢大家的信息，

我的实际问题是由于没有使用按钮，我想使用显示在 div 的复制站点上的相同悬停工具提示选项。所以我要做的是通过调用函数在我使用的每个 javascript 文件中加载 jQuery：

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

Clipboard.js 使用 jQuery 动态添加的元素的实现

Clipboard.js implementation on Dynamicly added elements with jQuery

javascript

jquery

clipboard.js