Question

我正在尝试对用户按钮点击执行某些操作：

使用jQuery AJAX调用从服务器获取一些数据。
成功时，请将此数据保存为按钮属性data-clipboard-text值。
使用clipboardjs将此值复制到剪贴板。

问题：步骤3使用虚拟文本在jQuery.get().done()之外完美地工作，但不在done()内部。这不是我所期望的，因为在没有目标值的情况下，clipboardjs会触发复制。

(function ($) {
var root = {};
root = {
    get_client_addresses_from_server: function (btn) {

        var url = btn.attr('data-src');
        $.get(url, function (data) {
            }
        ).done(function (data) {
            btn.attr('data-clipboard-text', data.text);

            // here clipboardjs is unable to copy
            var clipboard = new Clipboard('.btn', {
                text: function (trigger) {
                    return trigger.getAttribute('data-clipboard-text');
                }
            });

            clipboard.on('success', function (e) {
                console.info('Action:', e.action);
                console.info('Text:', e.text);
                console.info('Trigger:', e.trigger);

                e.clearSelection();
            });

            clipboard.on('error', function (e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });


        });


    },
};

$('#client-action-form .form-actions button[value="copy_addresses"]').click(function (event) {
    event.preventDefault();
    root.get_client_addresses_from_server($(this));
});
})(jQuery);

Answer 1

自己找到解决方案：http://jsfiddle.net/zenorocha/n5pLh1rk/2/

$.ajax({
  url: "https://api.github.com/repos/zenorocha/clipboard.js/readme",
  dataType: "jsonp"
})
.done(function(result) {
    copy(result.data.content);
});

function copy(someText) {
    var clipboard = new Clipboard('.btn', {
        text: function() {
            return someText;
        }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
}

Clipboardjs在jQuery.get（）中没有工作。完成（）

1 个答案: