Таблица данных с разбиением на страницы, получение данных строки нажатием кнопки в указанной строке, работает только на первой странице

Question

У меня есть таблица данных с n строками и 5 видимыми столбцами, один из которых представляет собой кнопку раскрывающегося списка, которая приводит к 2 кнопкам, одна из которых предназначена для загрузки, а другая - для повторной отправки файла. Я использую нумерацию страниц, и проблема в том, что эти кнопки работают только на первой странице, на других страницах, когда я нажимаю любую из этих кнопок, они даже не запускают код. Не могли бы вы, ребята, помочь мне решить эти вопросы?

Вот мой код таблицы данных:

var table;
$(document).ready(function () {
        table = $('#dataTable').DataTable({
            responsive: true,                
            columns: [
                { visible: false },
                null,
                null,
                null,
                { type: "date" },
                {
                    "render": function () {
                        return '<span class="dropdown"><button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Actions</button><div class="dropdown-menu"><input type="button" name="DownloadFile" class="dropdown-item" value="Download"><input type="button" name="ResubmitFile" class="dropdown-item" href="" value="Resubmit"></div></span>'
                    }
                }
            ],
            order: [[4, "desc"]]
        });

        $("input[name='DownloadFile']").on("click", function (el) {
            var id = $(this).closest("tr").attr("id");                                            
            window.open("/DataManagement/DownloadFile/" + id);             
        });

        $("input[name='ResubmitFile']").on("click", function (el) {
            var uploadId = $(this).closest("tr").attr("id");
            var req = $.get("/DataManagement/ResubmitFileToProject", { UploadId: uploadId });
            req.done(function (res) {                                     
                TreatSubmissionResult(null, null, res);
            });
        });

    });

Answer 1

Что происходит, когда документ готов (после загрузки страницы), эти события привязываются к элементам, существующим в DOM. У DOM пока нет кнопок на 2-й, 3-й, ... и n страницах, потому что эти элементы создаются только при переходе к их конкретной странице c.

Что вы хотите сделать привязать событие к родительскому элементу, используя .on().

. С помощью приведенного ниже сценария я прикрепил событие к таблице данных, хранящейся в var table, затем добавил целевой элемент в качестве параметра;

var table;
$(document).ready(function () {
        table = $('#dataTable').DataTable({
            responsive: true,                
            columns: [
                { visible: false },
                null,
                null,
                null,
                { type: "date" },
                {
                    "render": function () {
                        return '<span class="dropdown"><button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Actions</button><div class="dropdown-menu"><input type="button" name="DownloadFile" class="dropdown-item" value="Download"><input type="button" name="ResubmitFile" class="dropdown-item" href="" value="Resubmit"></div></span>'
                    }
                }
            ],
            order: [[4, "desc"]]
        });

        $("#dataTable").on("click", "input[name='DownloadFile']", function (el) {
            var id = $(this).closest("tr").attr("id");                                            
            window.open("/DataManagement/DownloadFile/" + id);             
        });

        $("#dataTable").on("click", "input[name='ResubmitFile']", function (el) {
            var uploadId = $(this).closest("tr").attr("id");
            var req = $.get("/DataManagement/ResubmitFileToProject", { UploadId: uploadId });
            req.done(function (res) {                                     
                TreatSubmissionResult(null, null, res);
            });
        });

    });