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