how to get click event of row element of jstree?

Question

Can you please tell me how how to get click event of row element of jstree ? I make a demo of jstree in my fiddle .it is made in panel .you have to press "open panel " button to check panel

I want to click event of jstree element to get it id on click ? For preparation of tree I have to press "add test case button" many times and then press "open panel" button.

here is my fiddle http://jsfiddle.net/ZLe2R/6/

function addMenuItemsOfTestSuit(id){

 var menuid = "menu_" + id;
       var ref = $('#tree').jstree(true);
        alert('thank')
    ref.create_node("#", {"id" : menuid, "text" : id});

        ref.deselect_all();

}

Answer 1

Use this event listener:

$('#tree').on("select_node.jstree", function (e, data) { alert("node_id: " + data.node.id); });

Look jsTree API events for a list of events.

EDIT: created a fiddle: http://jsfiddle.net/y7ar9/4/

Answer 2

You can use

$(document).on('click', '.jstree-anchor', function(e) {...});

You may want to move your click handler to its own function and get the id from the anchor's parent:

$(document).on('click', '.jstree-anchor', function(e) {
    var anchorId = $(this).parent().attr('id');
    var clickId = anchorId.substring(anchorId.indexOf('_') + 1, anchorId.length);
    onMenuItemClick(clickId, e);
});
$(document).on('click', '.clickTestCaseRow', function (e) {
    onMenuItemClick(this.id, e);
});
function onMenuItemClick(clickId, e) {
    hideDisplayView();
    displayNewView(clickId);
    e.stopPropagation();
}

Here is a fiddle.

Answer 3

Personally I like event 'activate_node' instead. if you do a postback on node selection change and the page is reloaded and the node is still selected it will not cause another event to fire causing an endless postback loop.

$('#jstree').on('activate_node.jstree', function (e, data) {
     if (data == undefined || data.node == undefined || data.node.id == undefined)
                return;
    alert('clicked node: ' + data.node.id);
});