单击事件不会在新 jstree 中使用复制的锚点触发

Question

我有一个点击事件，它只允许锚标签在被双击时起作用。当锚标记位于原始树中但在将树中的文件复制到另一棵树后，该事件不会触发并使锚标记只需单击即可工作。有人知道这是什么原因吗？锚标记在新树中完全相同。我的代码如下：

$('.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>

这两个锚标签完全一样，但我不知道为什么另一个不触发点击事件...有人知道为什么吗？

Answer 1

发生这种情况是因为从一棵树移动到另一棵树可能会从 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。

Answer 2

您是否检查过 this.href 在您的函数范围内是否可以访问？很可能您引用的是 jquery 而不是对象本身

尝试：

var self = this;
$('.myClass').click(function(){
    return false;
}).dblclick(function() {
    window.location = this.href;
    return false;
});

Answer 3

这样试试：

$('body').on('click', '.tree-link', function(event){
        event.preventDefault();
        console.log('single-click');
}).on('dblclick', function() {
        event.preventDefault();
        console.log('double-click');
});

fiddle 这里：http://jsfiddle.net/vxm4quzz/1/

此外，您可能有兴趣阅读此内容：jQuery eventDelegation

Answer 4

我放弃了使用锚点，只是在使用 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";
}

单击事件不会在新 jstree 中使用复制的锚点触发

Click event not firing with copied anchor in new jstree

html

javascript

jquery

jstree