javascript - C# MVC Razor : Javascript binding to a partial view

Question

上一个上下文问题: C# MVC 5 Razor: Updating a partial view with Ajax fails

既然我已经成功地刷新了我的部分观点，我发现自己遇到了另一个我真的不知道如何处理的困难。您会看到，我显示的表格还显示每行两个按钮:

    <td class="noWrap width1percent tri">
        <input type="button" value="Valider" id="Valider_@i" data-valid=data />
        <input type="button" value="Rejeter" id="Rejeter_@i" data-reject=data />
    </td>

这是一个“验证”按钮和一个“拒绝”按钮。基本上，每行都可以“批准”或“拒绝”，用户使用这些按钮为每行做出决定。这些操作绑定(bind)到 Javascript 脚本，放在主视图的顶部，如下所示:

$(function () {
    $('*[data-valid]')
        .click(function () {
            // Get values of fields
            $("#divLoading").show();
            var idOfField = this.id;
            var data = document.getElementById(idOfField).dataset.valid;
            // Partially censored code
            // Now that we have the values of all fields we need to use a confirmation message
            var result = confirm("OK?")
            if (result == true) {
                // The user chose to validate the data. We have to treat it.
                validateResults(data);
            }
            else {
                $("#divLoading").hide();
            }
        })

验证结果:

function validateResults(data) {
    $.ajax({
        url: '@Url.Action("ValidateControl", "Article")',
        type: "POST",
        data: { data:data},
        success: function (result) {
            $("#tableControl").html(result);
            $("#divLoading").hide();
        }
    });
}

拒绝按钮也有类似的功能。

现在，在成功刷新我的部分 View 之前，这工作得很好。但是，现在刷新可以了，刷新后点击按钮就不起作用了。我相信这是因为刷新事件完成后，Javascript 操作不会再次绑定(bind)到按钮!

如何确保主视图中的 Javascript 操作绑定(bind)到部分 View 中生成的按钮？

请注意，我尝试将主视图的一部分放入部分 View 中。这确保了操作再次绑定(bind)，但刷新后完全杀死了 CSS，这也不是理想的结果!

Answer 1

由于您实际上是在替换表格的主体，因此如果您按照当前的方式进行操作，则需要重新连接事件。您还可以将事件挂接到父 tbody:

$(document).ready(function(){
    $("#tableControl").on("click","*[data-valid]", function(){
          ....
    });
});

我还没有测试过上面的内容，但类似的东西应该可以工作。或者，只需在页面上刷新部分 View 后重新连接按钮上的事件即可。