在使用datatables时,使用了2种风格的事件注册,结果冲突导致一个事件被覆盖,无法起作用。 改为一种风格后,使用event.stopPropagation();阻止事件冒泡,从而解决问题,上代码
在使用datatables时,使用了2种风格的事件注册,结果冲突导致一个事件被覆盖,无法起作用。
改为一种风格后,使用event.stopPropagation();阻止事件冒泡,从而解决问题,上代码:
原来的js片段
oTable = table.dataTable({ processing : true, //加载数据时显示正在加载信息 ajax : { url : '/applyList', type: 'POST', dataType: 'json' }, serverSide : true, //指定从服务器端获取数据 drawCallback : function(settings, json) {// 数据加载完成之后回调函数 Metronic.unblockUI(table) }, lengthMenu : [ 5, 10, 25, 50, 100 ], pageLength : 5, order : [[6,"desc"]], columns : [{ title : "flowId", className : "hide", data : "flowId" }, { ……各种列定义…… }, { title : "修改申请", className : "center", render : function(data, type, full, meta) { // 原来的写法,不起作用 // html = '<a href="javascript:resendForm(' + full.id + ');"><i class="fa fa-edit"></i>编辑</a>'; html = '<a class="resendForm"><i class="fa fa-edit"></i> 编辑</a>'; return html; } }], //T:button f:search l:每页数量下拉 r:sProcessing t:表格框 i:data信息 p:分页 sDom : "<T><'dt_header'<'row-fluid'<'col-sm-8'F><'col-sm-4'l>>r>t<'dt_footer'<'row-fluid'<'span6'i><'span6'p>>>", tableTools : {//编辑按钮 "sRowSelect" : "single", "aButtons" : [ { "sExtends" : "text", "sButtonText" : "申请", "fnClick" : toApply } ] } }); // 注册点击显示详细事件,整记录条都覆盖,导致编辑btn失效 table.on('click', 'tbody tr', function (e) { e.preventDefault(); var nRow = $(this).parents('tr')[0]; var index = e.currentTarget.rowIndex; var aData = oTable.fnGetData(nRow)[index - 1]; viewDetail(aData.id); }); // 注册修改申请事件,新方法 table.on('click', 'tbody tr .resendForm', function (e) { e.preventDefault(); e.stopPropagation(); // 阻止事件冒泡 var nRow = $(this).parents('tr')[0]; var aData = oTable.fnGetData(nRow); resendForm(aData); });
========参考=======
- http://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault
- https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation