数据表动作列和jquery点击事件问题答案

【问题标题】：Datatable action column and jquery click event issue数据表动作列和jquery点击事件问题
【发布时间】：2016-02-26 21:51:42
【问题描述】：

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

这就是我在数据表中创建操作列的方式：

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')  
});

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

注意：我的控制台中没有任何错误。

【问题讨论】：

Jquery adding event listeners to dynamically added elements的可能重复
Event binding on dynamically created elements?的可能重复

标签： javascript jquery twitter-bootstrap datatable

【解决方案1】：

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

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

  });

【讨论】：

是的，它似乎在工作。你能告诉我不按我的方式工作的原因吗？
@user3733831 这称为事件委托。寻找这个词。

【解决方案2】：

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

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

对此有很多问题，请检查它们以获得正确的解释：

【讨论】：