Datatable Javascript Link not working on 2nd page

问题:

I have a list of data in a table and am using the dataTable plugin for pagination.

However, my last column is a link. When I go to the 2nd page I cannot click the link, but the link opens only on the first page of the table.

When I did not have the datatable all the linked work, but it was when i added this it didnt work...

My code:

 <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>

Any idea why this is happening?

My ajax link inside this which opens the link:

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

回答1:

You need to use a 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.

So in your case, I would do this instead :

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