在新的jstree中,单击未使用复制的锚点触发的事件
Click event not firing with copied anchor in new jstree
我有一个点击事件,它只允许锚标记在双击时工作。当锚点标记在原始树中时,这种情况很好,但在树中的文件复制到另一棵树后,事件不会触发,只需单击即可使锚点标记工作。有人知道原因吗?新树中的锚点标记完全相同。我的代码如下:
$('.tree-link').click(function(){
return false;
}).dblclick(function() {
window.location = this.href;
return false;
});
复制前的原始锚点标记(激发事件):
<a class="jstree-anchor tree-link" href="#settings.html"><i class="jstree-icon jstree-themeicon fa fa-briefcase icon-state-success jstree-themeicon-custom"></i>test</a>
新树中复制的锚点标签(不触发事件):
<a class="jstree-anchor tree-link" href="#settings.html"><i class="jstree-icon jstree-themeicon fa fa-briefcase icon-state-success jstree-themeicon-custom"></i>test</a>
两个锚点标签完全相同,但我不知道为什么另一个没有触发点击事件。。。有人知道为什么吗?
您是否检查了this.href在函数范围内是否可以访问?很可能您引用的是jquery,而不是对象本身
尝试:
var self = this;
$('.myClass').click(function(){
return false;
}).dblclick(function() {
window.location = this.href;
return false;
});
之所以会发生这种情况,是因为从一棵树移动到另一棵树可能会从DOM中删除节点并再次插入它。
看看这个:
$('.myClass').click(function() {
return false;
}).dblclick(function() {
window.location = this.href;
});
$('.move').click(function() {
var anchor = $('.myClass');
anchor.remove();
document.body.appendChild(anchor.get(0));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://example.com"/ class="myClass">link</a>
<button class="move">Move link</button>
这个问题的解决方案是使用jQuery的方法.on
,它将事件附加到将来将添加到DOM的所有元素。
这样尝试:
$('body').on('click', '.tree-link', function(event){
event.preventDefault();
console.log('single-click');
}).on('dblclick', function() {
event.preventDefault();
console.log('double-click');
});
小提琴在这里:http://jsfiddle.net/vxm4quzz/1/
此外,您可能有兴趣阅读以下内容:jQuery eventDelegation
我放弃了使用锚点,只是在使用window.location.href更改页面时使用了双击事件。这目前对我来说很好。如果有人感兴趣,下面是代码:
$('#tree').on("dblclick", function (event) {
var li = $(event.target).closest("li");
var node = $('#tree').jstree().get_node(li.attr('id'));
if(node.icon.indexOf("briefcase") != -1){
window.location.href = "#settings.html";
}
相关文章:
- 动态添加/复制表单时绑定到表单提交事件
- 单击“事件复制”
- 限制用户使用按键事件 injQuery 复制和粘贴声明为数字文本框的文本框中的字符
- 在全日历中复制和粘贴事件
- 当通过javascript而不是按键/复制/粘贴更新文本输入时使用的事件处理程序
- 复制事件中的event.clipboardData.setData
- 如何使用“输入属性更改”事件来捕获鼠标复制和粘贴
- Jquery 复制了具有特定索引的 html 类,无法识别点击事件
- 完整日历正在复制拖放事件
- 在 jQuery 中触发复制事件
- 在 AngularJS 中单击事件时将项目从一个数组复制到另一个数组
- 追加到通过调整大小事件复制内容
- 将 HTML 输入更改为文本区域并复制所有事件
- 在 iScroll 中复制 LI 元素上的点击事件
- 如何使用事件处理程序将一个元素复制到另一个元素
- 原型事件,用于将事件对象复制到 Firefox 的 window.event
- 在这段代码中,复制自雄辩javascript的ch15,keyup事件监听器做什么
- 我怎样才能检测到“;复制图像”;浏览器事件
- 在新的jstree中,单击未使用复制的锚点触发的事件
- Mobile Safari-JavaScript点击事件中断复制和粘贴