找不到$(this)对象's的父级在零剪贴板(v2.1.6)插件中
Not able to find $(this) object's parent in zeroClipboard (v2.1.6) plugin
在@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>
以下是浏览器如何使用零剪贴板输出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');
});
将其作为答案发布:
因为this在事件中使用,我们永远不知道"this"指的是什么。我总是害怕"this"。
因此可通过以下方式解决:
$(event.target)
代替
$(this)
相关文章:
- 如何在Firefox中获取剪贴板文本和html当用户按下“;Ctrl+V”;
- 零剪贴板复制文本后切换页面
- 复制到剪贴板在safari-angularjs中不起作用
- 使用javascript代码将HTML元素复制到剪贴板
- “复制到剪贴板”不起作用
- 使用jQuery/Javascript将忽略表头的表的内容复制到剪贴板
- 有没有任何方法可以将javascript对象从源代码传递到系统/浏览器剪贴板
- javascript中的复制到剪贴板功能
- 使用JavaScript访问Chrome扩展的剪贴板
- 将属性模型复制到剪贴板
- 如何使用剪贴板.js
- 零剪贴板在第一次点击时不起作用
- WinJs 复制到 Windows Phone 的剪贴板
- 使用扩展程序访问 Chrome 剪贴板活动
- JavaScript 自动将文本复制到剪贴板
- 只能在第二次单击时将副本复制到剪贴板
- 如何检测firefox中是否可以访问剪贴板
- 复制到剪贴板是't工作
- 如何在internet explorer中从剪贴板中获取base64编码的图像
- 找不到$(this)对象's的父级在零剪贴板(v2.1.6)插件中