Dynamically created buttons in javascript, not using the correct onClick event

Question

I am dynamically creating buttons in javascript, and each button is supposed to select their corresponding node in a jsTree. The problem is that all the buttons select the last node in their respective branch. The jsTree is working as it is supposed to, so that is not the issue. The relevant code:

        var children = node.children;
        for (var i = 0; i < children.length; i++) {
            var childNode = myTree.get_node(children[i]);
            var myButton = document.createElement("div");

            myButton.className = 'imageButton';

                myButton.onclick = function () {
                    myTree.deselect_all([true]);
                    myTree.select_node(childNode);
                };

When I am building the buttons, the childNode is the correct node.

The problem is when the onClick fires, the childNode is the the last element in children[]. Which is then selected.

Any suggestions?

http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — acontell, Jan 14 '15 at 18:26
posted an answer based on the link, please accept if it worked — acontell, Jan 15 '15 at 16:57

score 0 · Answer 1 · edited May 23 '17 at 12:20

I think the problem lies in closure. The link explains it very well. Anyway, I'd try this and see what happens:

function clickEvHandlerClosure(childnode) {
    return function () {
        myTree.deselect_all([true]);
        myTree.select_node(childnode);
    };
}

// your code
....

// In the loop, replace this:
//myButton.onclick = function () {
//                myTree.deselect_all([true]);
//                myTree.select_node(childNode);
//            };
// for this:
myButton.onclick = clickEvHandlerClosure(childnode);

Could work.

score 0 · Accepted Answer · answered Jan 16 '15 at 17:58

I used the bind function to make it work.

     myButton.onclick = function (index) {
                var myTree = $('#jstree').jstree();
                var node = myTree.get_selected(true)[0];
                var children = node.children;
                var childNode = myTree.get_node(children[index]);
                    myTree.deselect_all([true]);
                    myTree.select_node(childNode);
                }.bind(this, i);

Dynamically created buttons in javascript, not using the correct onClick event

2 Answers2