Question

我在javascript中动态创建按钮，每个按钮都应该在jsTree中选择相应的节点。问题是所有按钮都选择了各自分支中的最后一个节点。 jsTree正在按预期工作，所以这不是问题。相关代码：

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

当我构建按钮时，childNode是正确的节点。

问题是当onClick触发时，childNode是children []中的最后一个元素。然后选择哪个。

有什么建议吗？

Answer 1

我认为问题在于closure。该链接解释得非常好。无论如何，我试试看看会发生什么：

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

可以工作。

Answer 2

我使用bind函数使其工作。

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

在javascript中动态创建按钮，而不是使用正确的onClick事件

2 个答案: