Not able to find $(this) object's parent in zeroClipboard (v2.1.6) plugin

主宰稳场 提交于 2019-12-25 03:59:24

问题


Got the answer with the help of @LanderVanBreda

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

Question was:

The Code is almost working but got stuck at the final stage while copying the text to clipboard.

There is $(this) object but it's not working. I just want to make the below line of code work.

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

Here is the actual 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>

Here is how Browser output the HTML using zeroClipboard

<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>

Here is 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');
});

回答1:


Posting it as an answer :

Because the this is used inside an event we can never know where 'this' refers to. I'm always scared of 'this'.

So solvable by :

$(event.target)

Instead of

$(this)


来源:https://stackoverflow.com/questions/26641671/not-able-to-find-this-objects-parent-in-zeroclipboard-v2-1-6-plugin

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!