无法在 zeroClipboard (v2.1.6) 插件中找到 $(this) 对象的父对象答案

【问题标题】：Not able to find $(this) object's parent in zeroClipboard (v2.1.6) plugin无法在 zeroClipboard (v2.1.6) 插件中找到 $(this) 对象的父对象
【发布时间】：2014-10-29 22:21:34
【问题描述】：

在@LanderVanBreda 的帮助下得到了答案

zeroClipboard.on('copy', function (event) {
    var highlight = $(event.target).parent().nextAll('.highlight').first()
    event.clipboardData.setData("text/plain", highlight.text())
});

问题是：

代码几乎可以工作，但在将文本复制到剪贴板时卡在最后阶段。

有$(this) 对象，但它不起作用。我只是想让下面的代码行工作。

zeroClipboard.on('copy', function (event) {
    $(this).parent().addClass('someClass');
});

这是实际的 HTML：

<div class="tab-content">
    <div class="tab-pane active">
        <div class="highlight mb-0">
        <pre><code>Some vpaid code </code></pre>
    </div>
    <div class="tab-pane">
        <div class="highlight mb-0">
        <pre><code>Some mraid code</code></pre>
    </div>
</div>

这是浏览器如何使用 zeroClipboard 输出 HTML

<div class="tab-content">
    <div class="tab-pane active">
        <div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>
        <div class="highlight mb-0">
        <pre><code>Some VPAID code </code></pre>
    </div>
    <div class="tab-pane">
        <div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>
        <div class="highlight mb-0">
        <pre><code>Some MRAID code</code></pre>
    </div>
</div>

这里是 JavaScript：

// Config ZeroClipboard
ZeroClipboard.config({
    hoverClass: 'btn-clipboard-hover'
})

// Insert copy to clipboard button before .highlight
$('.highlight').each(function () {
    var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>'
    $(this).before(btnHtml)
});

var zeroClipboard = new ZeroClipboard($('.btn-clipboard'));
var htmlBridge = $('#global-zeroclipboard-html-bridge');

// Handlers for ZeroClipboard
zeroClipboard.on('ready', function (event) {
    htmlBridge
        .data('placement', 'top')
        .attr('title', 'Copy to clipboard')
        .tooltip();

    // Copy to clipboard
    zeroClipboard.on('copy', function (event) {
        var highlight = $(this).parent().nextAll('.highlight').first()
        event.setData(highlight.text())
    });

    // Notify copy success and reset tooltip title
    zeroClipboard.on('aftercopy', function () {
        htmlBridge
            .attr('title', 'Copied!')
            .tooltip('fixTitle')
            .tooltip('show')
            .attr('title', 'Copy to clipboard')
            .tooltip('fixTitle')
    });
});

// Notify copy failure
zeroClipboard.on('error', function () {
    ZeroClipboard.destroy();
    htmlBridge
        .attr('title', 'Flash required')
        .tooltip('fixTitle')
        .tooltip('show');
});

【问题讨论】：

发生了什么？您在控制台中收到了哪些错误消息？
@syed 'this' 可能不会指向事件中的 dom 对象。您确实在代码中使用了“event.target”，因此您可以使用 $(event.target) 而不是 $(this) 我认为。
@LanderVanBreda 我按照您所说的进行了更改并且效果很好，谢谢:) 您可以将此作为答案而不是评论，我会将其标记为已接受的答案。仅供参考 - $(this) 在早期版本的 zeroClipboard 中工作，您可以在 Bootstrap 的当前网站中看到该工作。在最新版本的 zeroClipboard 中有些问题，但现在它可以与 $(event.target) 一起使用

标签： javascript jquery zeroclipboard

【解决方案1】：

将其发布为答案：

因为 this 是在事件中使用的，所以我们永远无法知道 'this' 指的是哪里。我总是害怕“这个”。

可以通过以下方式解决：

$(event.target)

代替

$(this)

【讨论】：