jstree 插件和 stopPropagation 问题答案

【问题标题】：jstree plugin & stopPropagation issuejstree 插件和 stopPropagation 问题
【发布时间】：2014-11-19 09:10:02
【问题描述】：

我是第一次使用 jstree 3.0.8，我遇到了关于 stopPropagation 的问题。当我点击 span.nodeInfo 时，尽管 stopPropagation，它仍然会触发父链接的事件。

你可以在 jsfiddle 上看到一个例子：http://jsfiddle.net/CloughyLow/7p0xq698/29/

1.我想做的事：

我需要在树的某些部分放置按钮来触发操作。在这里，我使用警报进行测试（至少它会是一个对话框）。（<span class="nodeInfo">?</span> 在下面的 html 中）
我想禁用选择（下面js中的deselect_node(data.node)）
然后在父节点上触发open/colse（下面js上的toggle_node(data.node)）

这个列表的最后两点没问题。但是我不能在不触发第三个的情况下使第一个工作，因为stopPropagation 似乎不起作用。你知道我做错了什么吗？

2。我做了什么：

HTML

div id="myTreeview">
    <ul>
        <li class="jstree-open" data-jstree='{"icon":"fa fa-folder"}'>
            title <span class="nodeInfo">?</span>
            <ul>
                <li data-jstree='{"icon":"fa fa-file-pdf-o"}'><a href="#">My file</a></li>
                <li data-jstree='{"icon":"fa fa-file-pdf-o"}'><a href="#">My file</a></li>
                <li data-jstree='{"icon":"fa fa-file-pdf-o"}'><a href="#">My file</a></li>
            </ul>
        </li>
        <li class="jstree-open" data-jstree='{"icon":"fa fa-folder"}'>
            title <span class="nodeInfo">?</span>
            <ul>
                <li data-jstree='{"icon":"fa fa-file-pdf-o"}'><a href="#">My file</a></li>
                <li data-jstree='{"icon":"fa fa-file-pdf-o"}'><a href="#">My file</a></li>
                <li data-jstree='{"icon":"fa fa-file-pdf-o"}'><a href="#">My file</a></li>
            </ul>
        </li>
    </ul>
</div>

JS

    $('#myTreeview').jstree({});

$('#myTreeview').on('select_node.jstree', function (e, data) {
        // avoid selection
        $('#myTreeview').jstree(true).deselect_node(data.node);
        // trigger open close
        if (data.node.children.length > 0) {
            $('#myTreeview').jstree(true).toggle_node(data.node);
        } 
        //restore links
        else {
            var href = data.node.a_attr.href;
            window.open( href,'_blank' );
        }
    });
// ------------------DOESNT SEEM TO WORK ---------------------
//stop propagation for nodeInfo DOESNT SEEM TO WORK
$('body').on('click','.nodeInfo', function(event){
    event.stopPropagation();
    alert('test');
});

你可以在 jsfiddle 上看到一个例子：http://jsfiddle.net/CloughyLow/7p0xq698/29/

希望我的解释没问题。谢谢你的帮助。

【问题讨论】：

标签： javascript jquery jquery-plugins jstree stoppropagation

【解决方案1】：

你试过了吗：

event.preventDefault();

这对我有用：

$('.nodeInfo').on('click', function(event){
    event.preventDefault();
    event.stopPropagation();
    alert('test');
});

【讨论】：

谢谢你，当我使用这个解决方案时，它起初可以工作，但是，如果我打开/关闭列表，$('.nodeInfo').on('click') 不会'不再工作了。
@user2136179 ：请注意，折叠节点会删除其子节点的 dom 元素，并且在展开期间它们会从头开始重新创建。这可能会重置绑定。

【解决方案2】：

请检查此代码，之前代码的小改动。此代码工作正常..

$('.jstree-open').on('click', function(event){
  event.preventDefault();
  event.stopPropagation();
  alert('test result');
});

希望这会对你有所帮助。

【讨论】：