jstree plugin & stopPropagation issue

Question

I am using jstree 3.0.8 for the first time and I have an issue about stopPropagation. When I click on span.nodeInfo, despite the stopPropagation, it stills trigger the event of the parent link.

you can see an exemple on jsfiddle : http://jsfiddle.net/CloughyLow/7p0xq698/29/

1. What I wanna do :

• I need to put a button on some parts of my tree to trigger an action. Here i use an alert for the tests (at least it would be a dialog). (<span class="nodeInfo">?</span> in the html below)
• I want to disable select (deselect_node(data.node) in the js below)
• And then trigger open/colse on the parents nodes (toggle_node(data.node) on the js below)

the last two points of this list are ok. But i can't make the first one work without trigger the third one caus the stopPropagation doesn't seem to work. Do you have an idea about what I'm doing wrong ?

2. What I've done:

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');
});

you can see an exemple on jsfiddle : http://jsfiddle.net/CloughyLow/7p0xq698/29/

Hope my explanation is ok. Thanks for your help.

Answer 1

Have you tried:

event.preventDefault();

This works for me:

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

Answer 2

Please check this code , small change in previous code. This code works fine..

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

Hope this will help you.