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

感谢所有信息，

我的实际问题是由于没有使用按钮，我想使用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))
    })
};

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

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

2 个答案: