How can I attach custom behaviour to a double click in jsTree?

Question

I'm using the jsTree jQuery plugin and want to execute code when the user double clicks a node.

I can't seem to get it to work. I found some documentation on a ondblclk event but it doesn't fire.

    browser.jstree(
            {
                plugins: ["themes", "json_data", "ui", "cookies"],
                callback:
                {
                    ondblclk: function (node, tree) {
                        if (!thisReportBrowserthis._isFoldersOnly) {
                            var f = node;
                        }
                    }
                }
            }
        );

How can I handle double click events with jstree?

It appears the documentation I found for the above code snippet was out-of-date. — John Mills, Sep 10 '10 at 00:00

John Mills · Accepted Answer · 2013-04-17T01:48:08.783

25

It turns out I can do this:

jstree.bind("dblclick.jstree", function (event) {
   var node = $(event.target).closest("li");
   var data = node.data("jstree");
   // Do my action
});

node contains the li that was clicked and data contains the metadata with my info in it.

edited Apr 17 '13 at 01:48

answered Sep 09 '10 at 23:59

John Mills

10,020
12
74
121

1

Data returns undefined. – Umar Sid Nov 14 '16 at 01:53

score 6 · Answer 2 · answered Sep 19 '10 at 15:49

6

'dblclick.jstree' doesn't exist in last version jsTree 1.0.

DoubleClick for node:

$("#yourtree").delegate("a","dblclick", function(e) {
  var idn = $(this).parent().attr("id").split("_")[1];
  alert(idn); //return NodeID    
});

Insert this if you want just dblclicked node

if (this.className.indexOf('icon') == -1) {  /* is the node clicked a leaf? */ }

answered Sep 19 '10 at 15:49

parts2eu

864
7
11

I don't see any "id"s on my tree (I'm using the HTML_DATA plugin to create my tree and I didn't bother to create any IDs), but leaving out that code this works. ".on()" is the more modern jQuery way to do this, so do $("#yourtree").on("dblclick","a", function(e) {...}); – mhenry1384 Jul 01 '12 at 17:10

score 4 · Answer 3 · answered Apr 13 '11 at 16:49

4

It's a bit different to get the data out for me, but otherwise GiddyUpHorsey's answer was spot-on. Here is the code again:

        jstree.bind("dblclick.jstree", function (e, data) {
            var node = $(e.target).closest("li");
            var id = node[0].id; //id of the selected node
        });

answered Apr 13 '11 at 16:49

Quynh

41
2

same for me, except remove the data from the callback as it is undefined – frage Aug 10 '17 at 00:08

score 2 · Answer 4 · answered Nov 15 '17 at 22:22

2

The above answers do not work on the latest version of jstree (which is 3.3.4)
This cost me a day of mind bending work but I finally got it. Here is working doubleclick to Edit code:

$('#tree1').bind("dblclick.jstree", function (event) {
  var tree = $(this).jstree();
  var node = tree.get_node(event.target);
  tree.edit(node);
});

and here is a working jsfiddle.

answered Nov 15 '17 at 22:22

user1254723

181
1
8

Your Code Snippet is not working, but the Fiddle. Solution works fine for me. – Wolfgang Blessen Feb 13 '19 at 09:44

score 1 · Answer 5 · answered Feb 18 '18 at 20:45

1

as version 3.3.5, I'm using this one:

        $('#jstree').on("dblclick.jstree", function (e) {
            var instance = $.jstree.reference(this),
            node = instance.get_node(e.target);
            // Code
        });

answered Feb 18 '18 at 20:45

ozdemir

379
5
8

score 0 · Answer 6 · answered Apr 22 '20 at 10:12

0

It worked for me

$("#MyTree").on('dblclick','.jstree-anchor', function (e) {
    var instance = $.jstree.reference(this),
    node = instance.get_node(this);
    console.log(node);
});

answered Apr 22 '20 at 10:12

MD SHAHIDUL ISLAM

14,325
6
82
89

How can I attach custom behaviour to a double click in jsTree?

6 Answers6

Linked