javascript 中动态创建的按钮，未使用正确的 onClick 事件

Question

我在 javascript 中动态创建按钮，每个按钮都应该 select 它们在 jsTree 中的相应节点。问题是所有按钮 select 各自分支中的最后一个节点。 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[] 中的最后一个元素。然后 selected.

有什么建议吗？

Answer 1

我觉得问题出在closure。 link 解释得很好。不管怎样，我会试试看会发生什么：

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

我使用绑定函数使其工作。

     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 事件

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

javascript

jquery

jstree