复选框回调函数未从第二个 onchange 调用答案

【问题标题】：Checkbox callback function not getting called from second onchange复选框回调函数未从第二个 onchange 调用
【发布时间】：2015-06-28 00:29:02
【问题描述】：

我正在运行时根据 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 函数被调用），但是如果我选中或取消选中复选框 @987654326 @ 没有被调用。

【问题讨论】：

你能提供小提琴吗？
我同意。我看不出您的更改事件 javascript 有任何本质上的错误，但如果不了解更多关于数字内容的信息，就很难说有什么问题。使用 very simplified approach 时，它似乎在再次被调用时工作。

标签： javascript jquery html checkbox

【解决方案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 的删除和隐藏，那么为什么要隐藏它只是为了在下一行将其全部删除？

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

【讨论】：

【解决方案2】：

这似乎是一个范围问题。

变量callback是一个接收参数的函数。但是，它现在的方式只是获取传递给它的最后一个值。

我建议改成这样：

var callback = function(fig, figId) {
     return function() {
         RemoveColumn(fig, figId);
     }
}

然后像这样创建复选框：

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

这样RemoveColumn() 函数将始终具有正确的值以供使用。

【讨论】：

【解决方案3】：

当我第一次取消选中该复选框时，它正在工作很好（意味着 RemoveColumn 函数被调用），但如果我选中或取消选中复选框 RemoveColumn is not getting called

尝试评论这一行：

if (column.figure.id == columnID) {
    figureToBeModified.hide(column.figure);
    //figureToBeModified.remove(column.figure);/* on first call it gets removed, so its not available for next time */
}

【讨论】：