动态按钮不会在 jQuery 中打开模态

如何解决动态按钮不会在 jQuery 中打开模态

我有一个选项卡式面板，每个窗格都有一个 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 ],});

我认为最重要的一段 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');
}

非常感谢您的帮助

解决方法

尝试在您的数据表初始化中添加 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 中，以便在呈现数据表中的所有数据后，它将在按钮旁边进行初始化。