jQuery 中的动态按钮不打开模态

Question

我有一个选项卡式面板，每个面板都有一个数据表列表，其中包含用于编辑或删除表中每一行的按钮。页面加载后，第一个面板的图像下方

在所选的其他面板的下方

每个编辑操作按钮都应打开模式窗体以编辑 Datatables 中的行数据，但它们不起作用。我的意思是，只有第一个 Bases 窗格中的 Edit actions 按钮可以正常工作......另一个选项卡式窗格中的按钮不会打开模态。只需在每个窗格中添加灰色按钮就可以打开模式...我认为这是因为灰色的“添加”按钮是静态的...不是像中的行那样由 AJAX 调用动态创建的数据表。

我很想知道如何解决这个奇怪的问题。

在创建页面的 HTML 代码下方（每个选项卡式窗格只有一段 HTML）：

<!-- Register pane content -->
<div class="tab-pane" id="register-tab">
    <div class="row">
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table table-sm table-bordered mb-0" id="register-table">
                    <thead class="thead-light">
                        <tr>
                            <th>Registration</th>
                            <th>CofR</th>
                            <th>From</th>
                            <th>To</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </div>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-right">
        <button type="button" id="add-registration-button" class="btn btn-secondary btn-sm waves-effect waves-light mt-2">Add Registration</button>
        </div>
    </div>
</div>

加载数据表的jQuery代码如下：

//Ajax datatables
var registerTable = $('#register-table').DataTable({ 
    responsive: true,
    autoWidth: false,
    searchDelay: 500,
    processing: true,
    serverSide: true,
    stateSave: true,
    paging: false,
    ordering: false,
    info: false,
    searching: false,
    ajax: {
        url: controller_url + '/get_aircraft_registrations/' + aid,
        type: "GET",
    },
    columns:  [
        { data: "registration" },
        { data: "cor" },
        { data: "registerDate" },
        { data: "cancDate" },
        { data: "action", responsivePriority: -1 },
    ], 
    createdRow: function ( row, data, index ) {
        $( row ).find('td:eq(3)').attr('data-id', data.id);
    },
    columnDefs: [
        {
            targets: -1,
            title: 'Actions',
            orderable: false,
            searchable: false,
            render: function(data, type, full, meta) {
                return `
                <td>
                    <div class="button-list">
                    <button type="button" class="btn btn-xs btn-info waves-effect waves-light"><i class="mdi mdi-pencil edit-registration"></i></button>
                    <button type="button" class="btn btn-xs btn-danger waves-effect waves-light"><i class="mdi mdi-close remove-registration"></i></button>
                    </div>
                </td>`;
            },
        },
        {
            targets: [ 1, 2, 3 ],
            orderable: false,
            searchable: false,
        },
    ],
});

我认为最重要的 jQuery 代码是以下代码，用于在单击每个按钮时打开模式

$("body").on("click",".button-list .actions",function(e){
    var $btn = $(this);
    
    var id = $btn.closest('td').data('id');
    
    if(id != null) {
        e.preventDefault();
       
        if($btn.hasClass("edit-base")) {
            console.log('you want to edit base with id ' + id);
            editBase(id);
        }
       
        if($btn.hasClass("remove-base")) {
            console.log('you want to remove base with id ' + id);
            deleteBase(id);
        }
    }
});

function editBase(id){
    console.log(`Editing base with id ${id}`);
   
    $('#baseModal').modal('show');
}

非常感谢您的帮助

Answer 1

尝试在您的数据表初始化中添加 initComplete。

"initComplete":function( settings, json){
    $("body").on("click",".button-list .actions",function(e){
       var $btn = $(this);
    
       var id = $btn.closest('td').data('id');
    
       if(id != null) {
          e.preventDefault();
       
          if($btn.hasClass("edit-base")) {
            console.log('you want to edit base with id ' + id);
          }
       
          if($btn.hasClass("remove-base")) {
            console.log('you want to remove base with id ' + id);
          }
       }
    });
 }

您可以将按钮点击功能放在 initComplete 中，这样在呈现数据表中的所有数据后，它将在按钮旁边初始化。

jQuery 中的动态按钮不打开模态

Dynamic buttons don't open modal in jQuery

jquery

modal-dialog

datatables