Question

我有一个部分视图，其中有一个使用jQuery DataTables的表。

@model IEnumerable<DSPFuelLog.Models.code_AutoMake>

<h3>Auto Make List</h3>
<table id="Auto-Make-Table" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th class="col-md-5">
                @Html.DisplayNameFor(model => model.AutoMake)
            </th>
            <th class="col-md-5">
                @Html.DisplayNameFor(model => model.Active)
            </th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.AutoMake)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Active)
                </td>
                @if (!item.Active)
                {
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { id = item.MakeID }) |
                        <a href="#" class="text-info js-automake-activate" data-automake-id="@item.MakeID" data-automake-name="@item.AutoMake">Activate</a>
                    </td>
                }
                else
                {
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { id = item.MakeID }) |
                        <a href="#" class="text-danger js-automake-delete" data-automake-id="@item.MakeID" data-automake-name="@item.AutoMake">Deactivate</a>
                    </td>
                }

            </tr>
        }
    </tbody>
</table>

在我的主视图中，我称之为部分：

<div id="myDiv">
    @{
        Html.RenderAction("Index", "code_AutoMake");
    }
</div>

以下是设置DataTable的脚本：

var autoMakeTable = $("#Auto-Make-Table").DataTable({
    "bPaginate": false,
    "bFilter": false,
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [2] },
        { "bSearchable": false, "aTargets": [2] }
    ]
});

现在，正如您在局部视图中看到的那样..取决于该项目是否有效..将显示activate或deactivate链接。

这是我点击deactivate

时会发生什么的脚本

$("#Auto-Make-Table").on("click",
    ".js-automake-delete",
    function() {

        var link = $(this);
        var autoMakeName = $(this).data("automake-name");
        var autoMakeId = $(this).data("automake-id");

        bootbox.confirm("Are you sure you want to deactivate this auto make?",
            function(result) {
                if (result) {
                    $.ajax({
                        url: infoGetUrl + autoMakeId,
                        method: "DELETE",
                        success: function(response) {
                            $.ajax({
                                url: "@Url.Action("Index", "code_AutoMake")",
                                method: "GET",
                                success: function(data) {
                                    //Here just render that partial view like 
                                    $("#myDiv").html('')
                                        .html(data);//This will empty first then render the new data
                                    $(body).html(response);
                                }
                            });
                            toastr.success(autoMakeName + " successfully deleted");
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            var status = capitalizeFirstLetter(textStatus);
                            var error = $.parseJSON(jqXHR.responseText);
                            console.log(error);
                            toastr.error(status + " - " + error.exceptionMessage);
                        }
                    });
                }
            });
    });

现在，此脚本重新加载我的表格，Deactivate链接变为Activate ..但是当我点击Activate链接时...没有任何反应..并且该链接已设置与Deactivate链接完全相同的方式..所以使用jQuery＆amp; AJAX ..

所以在我的表重新加载之后......脚本不再有效。

如何让我的脚本继续工作？

感谢任何帮助。

激活脚本

$("#Auto-Make-Table").on("click",
    ".js-automake-activate",
    function() {

        var link = $(this);
        var autoMakeName = $(this).data("automake-name");
        var autoMakeId = $(this).data("automake-id");

        alert('test');

        bootbox.confirm("Are you sure you want to activate this auto make?",
            function(result) {
                if (result) {
                    $.ajax({
                        url: infoGetUrl + "ActivateAutoMake/" + autoMakeId,
                        method: "PUT",
                        success: function(response) {
                            $.ajax({
                                url: "@Url.Action("Index", "code_AutoMake")",
                                method: "GET",
                                success: function(data) {
                                    //Here just render that partial view like 
                                    $("#myDiv").html('')
                                        .html(data);
                                    $(body).html(response); //This will empty first then render the new data
                                }
                            });
                            toastr.success(autoMakeName + " successfully activated");
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            var status = capitalizeFirstLetter(textStatus);
                            var error = $.parseJSON(jqXHR.responseText);
                            console.log(error);
                            toastr.error(status + " - " + error.exceptionMessage);
                        }
                    });
                }
            });
    });

Answer 1

是的，因为当您使用javascript代码添加新HTML时，这些新HTML都没有记录该事件。

所以当你这样做时

success: function(data) {
     //Here just render that partial view like 
     $("#myDiv").html('')
          .html(data);//This will empty first then render the new data
     $(body).html(response);
    <over here you need to re-bind the 'click' event to your new html> 
}

您已将事件绑定在以前的html标记上，但不是新的标记。它不会自动为您更新绑定。由于您手动更改了html，因此需要重新绑定所有事件。

查看激活和停用的.on代码。看看你如何引用被删除和替换的#Auto-Make-Table（用你的代码）？这不应该是.on函数的参考点。

你应该尝试引用你的#myDiv，因为与＃Auto-Make-Table不同，＃myDiv没有被替换，并且整个代码中的事件都保持活着。

所以它应该是：

$("#myDiv").on("click",
    ".js-automake-delete", //(or activate)
    function() { ... }

jQuery脚本在ajax调用后无法正常工作

1 个答案: