javascript - 没有从第二个 onchange 调用复选框回调函数

Question

我正在运行时根据 UI 中的某些操作动态创建一个表，如下所示

     $(figure.children.data).each(function (i, Column) {
            if (i != 0) {
                var callBack = function () {
                    RemoveColumn(figure, Column.figure.id);
                }

                var input = $("<input>")
                            .attr("type", "checkbox")
                            .attr("checked", "checked")
                            .on("change", callBack);

                var tr = $('#tblEntity').append('<tr>');

                $("<td>").appendTo(tr).append(input);

                $("<td>").appendTo(tr).append(Column.figure.text);
            }
 });

RemoveColumn函数如下。

function RemoveColumn(figureToBeModified,columnID) {    
    $(figureToBeModified.children.data).each(function (i, column) {
        if (column.figure.id == columnID) {
            figureToBeModified.hide(column.figure);

            figureToBeModified.remove(column.figure);
        }
    });
}

问题: 当我第一次取消选中复选框时它工作正常(意味着 RemoveColumn 函数被调用)，但如果我选中或取消后记选中复选框 RemoveColumn 未被调用。

Answer 1

行var tr = $('#tblEntity').append('<tr>');会将 tr 添加到表中，但不会将其分配给 tr。

我想你的意思是这样的:

    var tr = $("<tr>");
    $('#tblEntity').append(tr);    
    $("<td>").appendTo(tr).append(input);
    $("<td>").appendTo(tr).append(Column.figure.text);

此外，如果像这样定义 RemoveColumn 不是更容易吗:

function RemoveColumn(figureToBeModified, column) {
    figureToBeModified.hide(column.figure);    
    figureToBeModified.remove(column.figure);
}

然后这样调用:

var callBack = function () {
    RemoveColumn(figure, Column);
}

如果删除和隐藏的行为类似于 jQuery 的删除和隐藏，那么为什么要隐藏它只是为了在下一行将其一起删除？

这些都不能直接解决您的问题，我需要有关您的图形数据的更多信息才能理解它，但也许这会帮助您更接近您想要的位置。