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();

}

oerl · Accepted Answer · 2014-05-04T14:08:39.507

31

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/

edited May 04 '14 at 14:08

answered May 04 '14 at 14:02

oerl

1,204
14
16

can you please use fiddle ? – May 04 '14 at 14:03
can we expand submenu option after click of "text" like "tc_1" and "tc_2" – May 04 '14 at 14:20
if you mean how to get the text of the node just use `data.node.text`, instead of `data.node.id`. Look at the fiddle again: http://jsfiddle.net/y7ar9/5/ – oerl May 04 '14 at 14:26
http://jsfiddle.net/GS4u3/8/ please check fiddle .I just want same as it is in this fiddle – May 04 '14 at 14:28
Press "add" button two or three time .then select any item it gives id.if you select item and press add it add submenu .till now it is fine – May 04 '14 at 14:30
in obove fiddle you see if you click any text like "1" and "2" it will expand if element have child .I need that functionality – May 04 '14 at 14:31
if you want how you addsubmenu in you answer fiddle http://jsfiddle.net/y7ar9/4/ .please click "add testcase" two or three times.and click any row .then again click "add test case" .it generate submenu – May 04 '14 at 14:38
This event is fired only when select the node. In deselect node isn't fired! – Majid Basirati Oct 06 '16 at 13:14
Personally I like event 'activate_node' instead. if you are doing a postback on node 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) – JJ_Coder4Hire Nov 22 '17 at 04:23

score 5 · Answer 2 · answered May 04 '14 at 14:06

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.

score 1 · Answer 3 · answered Nov 22 '17 at 04:25

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

how to get click event of row element of jstree?

3 Answers3

Linked