How can I attach custom behaviour to a double click in jsTree?
Solution 1
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.
Solution 2
'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? */ }
Solution 3
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
});
Solution 4
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.
Solution 5
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
});
Related videos on Youtube
John Mills
I've been coding for 20+ years. Currently I'm writing mostly C#, Javascript & PowerShell with AWS on the backend. Not too long ago I was doing a lot of full stack development using C#, HTML + Javascript and SQL Server, occasionally with Azure. Going even further back, I did a lot of VB.NET, VB6, Quick BASIC and even a little 80x86 assembler and unfortunately, some VBA along the way. For fun, I dabble a little with C++ and Arduino.
Updated on July 09, 2022Comments
-
John Mills almost 2 years
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?
-
John Mills almost 14 yearsIt appears the documentation I found for the above code snippet was out-of-date.
-
-
mhenry1384 almost 12 yearsI 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) {...});
-
Umar Sid over 7 yearsData returns undefined.
-
frage almost 7 yearssame for me, except remove the data from the callback as it is undefined
-
Wolfgang Blessen over 5 yearsYour Code Snippet is not working, but the Fiddle. Solution works fine for me.