Could not find $ (this) parent object in plugin zeroClipboard (v2.1.6)

Question

Got a response using @LanderVanBreda

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

Question:

The code almost works, but got stuck at the final stage, copying text to the clipboard.

There is a $(this) object, but it does not work. I just want the bottom line of code to 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> 

This is how the browser outputs 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 the 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'); }); 

Answer 1

Putting this as an answer:

Since this is used internally, we will never know what 'this' refers to. I am always afraid of 'this'.

So decidable:

 $(event.target) 

Instead

 $(this)