JsTree stopPropagation

by CloughyLow

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.8/jstree.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.0.8/themes/default/style.min.css">
<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>

CSS

.nodeInfo {
        background-color: #de1c09;
        color: #fff;
        font-weight: bold;
        display: inline-block;
        padding: 0 7px;
        font-size: 10px;
        line-height: 16px;
        text-decoration: none;
        border-radius: 3px;
        margin: 0 0 0 3px;
        cursor: pointer;
        
        &:hover {
            background-color: #000;
        }
    }

JavaScript

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

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

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