Question

我正在制作一个数据可视化工具，您可以在其中输入自己的数据。数据值存储在无序列表中，如下所示：<ul><li data-name='name'><a href='#' onclick='showEditDv(this);'>Edit</a>name | 7</li></ul。列表中可以有多个列表项。当您单击“编辑”按钮时，它会调用showEditDv()函数，并自行引用。在我展示函数之前，我会说data对象的组织如下：

data ->
    name: "root",
    children: [ {name: "something", size: "7"},
        {name: "something-else", size: "999"} ]

这是该函数的代码：

function showEditDv(object) {
    var name = $(object).parent().attr("data-name"),
        input = new Opentip($(object), {removeElementsOnHide: true, target: null, showOn: null, hideTrigger: "closeButton"}),
        disabled = (data.children[getChildIndexByName(name)].hasOwnProperty("children")) ? "disabled" : "";

    input.setContent("<label>Name:</label><input type='text' data-prevname='" + name + "' value='" + name + "' class='dv-add-name' /><label>Value:</label><input " + disabled + " type='text' class='dv-add-value' value='" + data.children[getChildIndexByName(name)].size + "' /><button class='callEditDv'>Apply</button>"); // Set content of opentip

    input.show();

    $("body").on("click", ".callEditDv", function() {
        var newname = $(this).siblings(".dv-add-name").val(),
            prevname = $(this).siblings(".dv-add-name").attr("data-prevname"),
            value = $(this).siblings(".dv-add-value").val();

        if (newname !== prevname)
        {
            data.children[ getChildIndexByName(prevname) ].name = newname; // Update name

            $(object).parent().attr("data-name", newname); // Update parent data

            $(object).siblings(".name").text(newname); // Update form
        }

        if (data.children[ getChildIndexByName(newname) ].size !== value)
        {
            data.children[ getChildIndexByName(newname) ].size = value;
            $(object).siblings(".value").text(value);
        }
        input.hide();
    });
}

它使用Opentip，这只是一种创建动态弹出窗口/工具提示的方法。问题是，一旦您更改了一次数据值，当您尝试再次更改它时，它会循环遍历代码两次！第一次一切按预期工作，但第二次使用相同的prevname再次执行，这意味着getChildIndexByName返回undefined并且无法设置变量导致错误。 getChildIndexByName遍历data.children的值，检查名称，直到找到匹配项，然后返回数组中对象的索引。

提前致谢！

Answer 1

试试这个：

$("body").off('click').on("click",...

jQuery Documentations

可以使用.unbind（）删除附加.bind（）的事件处理程序。（从jQuery 1.7开始，首选.on（）和.off（）方法在元素上附加和删除事件处理程序。）

Answer 2

变化：

$("body").on("click",...

到

$("body").unbind('click').on("click",

希望这有帮助！

为什么我的代码循环两次？

2 个答案: