Javascript 引导盒回调表单提交工作不正常

我正在动态创建一些表单，并在MVC5应用程序中使用bootbox 4以及bootstrap 3和jquery 3.1.0

编辑：我将项目的jquery从1.10.2更新到了3.1.0，下面仍然有相同的问题

用法：单击删除，引导框通过模式确认删除，如果确认，则调用表单上的.submit（）操作

问题是：我点击删除按钮，它会弹出一个模式来确认操作，我点击“继续”，但它什么也不做。所有表单元素中似乎只有一个工作提交操作。因此，我能够在每页刷新一个元素时成功调用submit

我是javascript新手，所以我现在对javascript有了基本的了解，我正在尝试找出我下面的代码的错误。任何帮助都将不胜感激

我的视图代码：

@foreach (var user in Model.Users)

    {
        <tr>
            <td>
                @user.Id
            </td>
            <td class="text-center">
                @user.FirstName @user.LastName
            </td>
            <td class="text-center">
                @Html.CheckBox("role", user.IsAdmin)
            </td>
            <td>
                @using (Html.BeginForm("UpdateUserRole", "Admin", FormMethod.Post, new {@class = "btn-inline"}))
                {
                    @Html.Hidden("id", user.Id)
                    @Html.Hidden("role", user.GetRole(user.IsAdmin))
                    <button type="submit" class="btn btn-info">Update</button>
                }
                @using (Html.BeginForm("RemoveUser", "Admin", FormMethod.Post, new {@class = "btn-inline", @id=user.Id+"Form"}))
                {
                    @Html.Hidden("id", user.Id)
                    <button data-user-id=@user.Id type="submit" class="btn btn-danger buttonElement">Remove</button>
                }
            </td>
        </tr>
    }

@section scripts
{
<script type="text/javascript">
    $(function () {
        $('form').on('click','button.buttonElement',function (e) {
            var user = $(this).attr("data-user-id");
            e.preventDefault();
            bootbox.dialog({
                message: "Do you want to continue ?", title: "Remove User",
                buttons: {
                    main: { label: "Cancel", className: "btn btn-default", callback: function () { return true; } },
                    success: { label: "Continue", className: "btn btn-default", callback: function () { $('#'+user+'Form').submit(); } }
                }
            });
        });
    });
</script>
}

@foreach（Model.Users中的var user）
{
@用户Id
@user.FirstName@user.LastName
@复选框（“角色”，user.IsAdmin）
@使用（Html.BeginForm（“UpdateUserRole”，“Admin”，FormMethod.Post，new{@class=“btn inline”}））
{
@Html.Hidden（“id”，user.id）
@隐藏（“角色”，user.GetRole（user.IsAdmin））
更新
}
@使用（Html.BeginForm（“RemoveUser”、“Admin”、FormMethod.Post、new{@class=“btn inline”、@id=user.id+“Form”}））
{
@Html.Hidden（“id”，user.id）
去除
}
}

我的脚本（添加到视图底部）：

@foreach (var user in Model.Users)

    {
        <tr>
            <td>
                @user.Id
            </td>
            <td class="text-center">
                @user.FirstName @user.LastName
            </td>
            <td class="text-center">
                @Html.CheckBox("role", user.IsAdmin)
            </td>
            <td>
                @using (Html.BeginForm("UpdateUserRole", "Admin", FormMethod.Post, new {@class = "btn-inline"}))
                {
                    @Html.Hidden("id", user.Id)
                    @Html.Hidden("role", user.GetRole(user.IsAdmin))
                    <button type="submit" class="btn btn-info">Update</button>
                }
                @using (Html.BeginForm("RemoveUser", "Admin", FormMethod.Post, new {@class = "btn-inline", @id=user.Id+"Form"}))
                {
                    @Html.Hidden("id", user.Id)
                    <button data-user-id=@user.Id type="submit" class="btn btn-danger buttonElement">Remove</button>
                }
            </td>
        </tr>
    }

@section scripts
{
<script type="text/javascript">
    $(function () {
        $('form').on('click','button.buttonElement',function (e) {
            var user = $(this).attr("data-user-id");
            e.preventDefault();
            bootbox.dialog({
                message: "Do you want to continue ?", title: "Remove User",
                buttons: {
                    main: { label: "Cancel", className: "btn btn-default", callback: function () { return true; } },
                    success: { label: "Continue", className: "btn btn-default", callback: function () { $('#'+user+'Form').submit(); } }
                }
            });
        });
    });
</script>
}

@节脚本
{
$（函数（）{
$（'form'）。在（'click'，'button.buttonElement'，函数（e）上{
var user=$（this.attr（“数据用户id”）；
e、 预防默认值（）；
bootbox.dialog({
消息：“是否继续？”，标题：“删除用户”，
按钮：{
main:{label:“Cancel”，className:“btn btn default”，回调：函数（）{return true；}}，
成功：{label:“Continue”，className:“btn btn default”，回调：函数（）{$（'#'+user+'Form'）。提交（）；}
}
});
});
});
}

编辑：以下是一些HTML输出：

<table class="table table-hover">
    <tbody>
        <tr>
            <td>
                Joe
            </td>
            <td class="text-center">
                Joe Cuevas
            </td>
            <td class="text-center">
                <input checked="checked" id="role" name="role" type="checkbox" value="true"><input name="role" type="hidden" value="false">
            </td>
            <td>
                <form action="/Admin/UpdateUserRole" class="btn-inline" method="post">
                    <input data-val="true" data-val-regex="Invalid!" data-val-regex-pattern="([A-Za-z0-9.-])+" data-val-required="NetworkID is required!" id="id" name="id" type="hidden" value="joe"><input id="role" name="role" type="hidden" value="Admin">                        <button type="submit" class="btn btn-info">Update</button>
                </form>                    <form action="/Admin/RemoveUser" class="btn-inline" id="joeForm" method="post">
                    <input data-val="true" data-val-regex="Invalid!" data-val-regex-pattern="([A-Za-z0-9.-])+" data-val-required="NetwordID is required!" id="id" name="id" type="hidden" value="joe">                        <button data-user-id="joe" type="submit" class="btn btn-danger buttonElement">Remove</button>
                </form>
            </td>
        </tr>
    </tbody>
</table>

乔
乔·奎瓦斯
更新
去除

编辑：解决方案

事实证明，modelstate在最终的HTML输出上覆盖了foreach循环从我的视图生成的所有表单的id值。这就解释了为什么会出现上述所有症状。在返回viewModel之前，我只是将以下代码添加到我的控制器中，并对其进行了修复：

---

ModelState.Remove（“id”）就嵌套而言，table/tr/td/form是一个不错的选择。您可能可以通过以下方式简化触发表单提交：

$('form').on('click','button.buttonElement',function (e) {
    var user = $(this).attr("data-user-id");
    var form = $(this).closest('form'); // <-- add this

    e.preventDefault();

    bootbox.dialog({
        message: "Do you want to continue ?", 
        title: "Remove User",
        buttons: {
            main: { 
                label: "Cancel", 
                className: "btn btn-default", 
                callback: function () { 
                    return true; 
                } 
            },
            success: { 
                label: "Continue", 
                className: "btn btn-default", 
                callback: function () { 
                    form.submit();  // <-- change this
                }
            }
         }
    });
 });

您可能想考虑一个事实，即用户可以在不单击“继续”按钮的情况下触发表单提交，在这种情况下，删除请求将在没有确认的情况下发生。

---

另外，引导盒还没有被确认可以与jQuery 3.x一起使用，尽管这更多地取决于父引导库版本-如果升级到jQuery 3.x，您必须升级到引导3.3.7。

应用程序的HTML输出是什么。我认为剧本没有问题。在这里做了一个小测试。。。我检查了我的html输出，我相信我可能已经发现了问题。我把表格嵌套在一张桌子里。表格>tr>td>表格。我会清理我的视图，然后回复结果。BA_Webimax，我继续在我的帖子中添加了一些html输出。我注意到还有一些额外的

数据-

属性似乎用于输入验证。验证例程是否可能以某种方式干扰表单提交，或者至少不使用引导框？您是否尝试过禁用验证以查看其余流程是否正常工作？我已从viewModel中删除了产生不必要输入验证的数据注释。这不是问题所在，这是我的剧本。我已经接受了下面的答案作为解决方案。我会继续尝试建议的更改，如果有机会的话。感谢您向我介绍jQuery和Bootbox，我正在这个应用程序上运行3.3.7。最后，用户如何在不单击“继续”的情况下提交表单？感谢您在这个问题上花费时间。这需要一个受过教育的用户，但您可以通过在浏览器的JavaScript控制台中运行类似于

$（'form'）.submit（）的东西来测试这一点。由于您只捕获某些按钮的单击事件，因此无法阻止页面上的表单触发其提交事件。您可以通过捕获提交事件，然后在用户确认删除后使用AJAX发布删除请求来处理这一点。