I am using jstree for a tree view in a web page.

The tree makes possible to rename and move nodes. Moving or renaming a node fires the rename_node.jstree and rename_node.jstree events.

With new nodes (created with rename_node.jstree events), the node can still be renamed and moved but the move_node.jstree and rename_node.jstree events are not fired.

It seems that the events are only bound with the inital nodes. I don't see any 'live' method to bind the events with nodes created after.

Is there any possibility to do that?

Here is a sample that helps (I hope) to understand my problem:

 $(function(){
    $("#nodes").jstree({ 
        "plugins" : [ "themes", "html_data", "dnd", "ui", "crrm" ]
    }).bind("move_node.jstree", function (event, data) {
        alert('move');
    }).bind("rename_node.jstree", function (event, data) {
        alert('rename');
    }).bind("create_node.jstree", function (event, data) {
        alert('create_node');
    })

    $("#create_button").click(function () { 
        $("#nodes").jstree("create",null,"last",{data:"name"}); 
    });
});

I am using jstree for a tree view in a web page.

The tree makes possible to rename and move nodes. Moving or renaming a node fires the rename_node.jstree and rename_node.jstree events.

With new nodes (created with rename_node.jstree events), the node can still be renamed and moved but the move_node.jstree and rename_node.jstree events are not fired.

It seems that the events are only bound with the inital nodes. I don't see any 'live' method to bind the events with nodes created after.

Is there any possibility to do that?

Here is a sample that helps (I hope) to understand my problem:

 $(function(){
    $("#nodes").jstree({ 
        "plugins" : [ "themes", "html_data", "dnd", "ui", "crrm" ]
    }).bind("move_node.jstree", function (event, data) {
        alert('move');
    }).bind("rename_node.jstree", function (event, data) {
        alert('rename');
    }).bind("create_node.jstree", function (event, data) {
        alert('create_node');
    })

    $("#create_button").click(function () { 
        $("#nodes").jstree("create",null,"last",{data:"name"}); 
    });
});

• javascript
• jquery
• events
• jstree

• This is worth a look it explains some of the events groups.google./d/msg/jstree/UIFqvVgmncQ/JsBVcbB-w5gJ – Daniel Powell Commented May 1, 2013 at 6:24

2 Answers 2

The mand is create_node, not create, I think. See http://www.jstree./documentation/core for more details.

FYI, your code would be better written as:

$(function() {
    $("#nodes").jstree({
        "plugins": ["themes", "html_data", "dnd", "ui", "crrm"]
    }).bind("move_node.jstree rename_node.jstree create_node.jstree", function(event, data) {
        var type = event.type;
        alert(type);
        if (type === 'move_node.jstree') {
            //handle move_node.jstree here
        } else if (type === 'rename_node.jstree') {
            //handle rename_node.jstree here
        } else if (type === 'create_node.jstree') {
            //handle create_node.jstree here
        }

    });

    $("#create_button").click(function() {
        $("#nodes").jstree("create", null, "last", {
            data: "name"
        });
    });
});

I know that is subjective, but take it for what is worth.

It seems that the events are fired correctly. The problem was somewhere in the logic. I had to set the id of the item too to be handled correctly.

$("#nodes").jstree("create",null,"last",{data:the_name, attr: {id: the_id}});

Sorry for this mistake.