Question

我正在使用带有动作列的jquery数据表。在该操作列中有两个链接“编辑”和“删除”。我的表格正确填充此操作列。但问题是我需要在点击此数据表的编辑按钮时打开一个自举模式。但它没有打开我的模态。

这就是我在datatable中创建动作列的方法：

var myTable = 
$('#view_user_table')
.DataTable({
  bAutoWidth: false,    
  "bProcessing": true,
  "bServerSide": true,
  "sAjaxSource": "includes/process_view_bank_datatable.php",
  "aoColumnDefs": [{
                    "aTargets": [6],  
                    "bSortable": false,
                    "mData": "0",   
                    "mRender": function (data, type, full) {
                       return '<div class="hidden-sm hidden-xs action-buttons">' + 
                                '<a class="green edit_this_user" href="javascript:void(0)" data-bank_id="'+data+'">edit</a>' + 
                                '<a class="red" href="javascript:void(0)">delete</a>' + 
                              '</div>';                              
                    }
                  }
                ],
  "aaSorting": [],
  "iDisplayLength": 50,

  select: {
    style: 'multi'
  }
});

然后我尝试打开我的模态，点击我上面创建的编辑链接。

这是我尝试的方式：

$('.edit_this_user').on('click', function() {
  alert('modal')  
});

但我无法得到警报。谁能告诉我它不工作的原因是什么？

注意：我的控制台无法收到任何错误。

Answer 1

动态生成元素的事件绑定，您应该以这样的方式编写，即已经存在.on的父内容，然后是事件类型，然后是要触发事件的元素选择器。像这样更改触发器代码并尝试：

  $('#view_user_table').on('click', '.edit_this_user', function(){

  });

Answer 2

您的代码不起作用，因为您尝试将事件侦听器附加到尚不存在的html。

您动态创建 .edit_this_user （通过另一个脚本，在您的示例中它是Datatable插件），因此当加载文档时（我想您在加载时执行代码）没有这类的元素。

关于此问题有很多问题，请检查一下是否有正确的解释：

数据表操作列和jquery点击事件问题

2 个答案: