数据表 Javascript Link 在第二页上不工作

Question

我在 table 中有一个数据列表，我正在使用 dataTable 插件进行分页。

然而，我的最后一列是link。当我转到第二页时，我无法单击 link，但 link 仅在 table.

的第一页打开

当我没有数据时table 所有 linked 工作，但是当我添加它时它没有工作...

我的代码：

 <table id="PartsResultListGrid" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.PartsRequestOrderNum)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Call_Num)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DetailView)
            </th>

        </tr>
    </thead>

    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.PartsRequestOrderNum)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Call_Num)
                </td>

                <td>
                    <div data-callno='@item.PartsRequestOrderNum' data-url="@Url.Action("GetPartsInfo", "Parts")">
                        <div class="PartsViewSubmit toolbarIcon">
                            <div class="toolbarIconText">View</div>
                        </div>
                    </div>
                </td>
            </tr>
        }
    </tbody>

</table>

Javascript:

<script type="text/javascript">
$(document).ready(function () {
    $('#PartsResultListGrid').dataTable({
        "bSort": false,
    });
});
</script>

知道为什么会这样吗？

我的ajaxlink里面这个里面打开link:

        $('.PartsViewSubmit').click(function () {
        $.ajax({
            type: "GET",
            url: $(this).parent().data("url"),
            data: { PartsRequestOrderNum: $(this).parent().data("callno") },
            success: function (data) {
                $("#PartsDetail").html(data);
            },
        });
    });

Answer 1

您需要使用 delegated event :

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

所以在你的情况下，我会这样做：

$(document.body).on('click', '.PartsViewSubmit', function() {
    $.ajax({
        ...
    });
});

数据表 Javascript Link 在第二页上不工作

Datatable Javascript Link not working on 2nd page

javascript

jquery

jquery-datatables