javascript - 尝试在 Knockout 中使用 ZClip

Question

我正在尝试使用 Knockoutjs 创建一个具有动态加载文本的网站，我希望用户能够单击该网站并将其复制到剪贴板。对于复制到剪贴板功能，我使用 Zclip当文本静态加载时我可以让它工作。

在我的 ViewModel 中，我有一个函数 copyFunction看起来像这样:

self.copyFunction = function(html) {
    console.log(html);
    $('#copytext').zclip({
        path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
        copy: function() {
            return $('#copytext').text();
        }
    });
}

只要在网页上单击其中一项，就会调用此函数。

在我的 HTML 中，我为我拥有的每个项目动态生成此类内容:

<div class="row" data-bind="foreach: itemList">
        <div class="col-xs-3 text-center">
            <a data-bind="click: $parent.copyFunction, text: text" href="#" id="copytext"></a>
        </div>
</div>

我知道我的copyFunction不正确，但我不知道我需要做什么才能让它为我工作。理想情况下，我想将 ZClip 应用于 <a>调用它的标签，但我不知道如何实现这一点。

我之前使用 ZClip 的唯一方法是最著名的示例:在 HTML 中设置 id 并使用 jQuery 事件处理程序。然而，我也无法让它工作，因为我是 JS 新手，而且我很确定当我的 jQuery 函数加载时 id 没有完全加载，因此它没有正确链接到 DOM .

如果您能帮助我深入了解如何使其正常工作，我将不胜感激。

Answer 1

通过将事件作为参数传递给函数解决了我的问题。

以下是该函数现在的样子:

self.copyFunction = function(html, event) {
    var target = event.target;
    $(target).zclip({
        path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
        copy: function() {
            return $(target).text();    
        }
    });
}

我遇到的另一个怪癖是，Zclip 仅在我将网站上传到我的服务器时才起作用，但不能从我的本地主机上传。有人知道为什么会发生这种情况吗？