Layui模板引擎绑定事件失效的问题

发表于 | 分类于 |

模板引擎中的绑定事件失效

目前普遍的解决方法：更新渲染

官方文档：跟表单元素一样，很多时候你的页面元素可能是动态生成的，这时element的相关功能将不会对其有效，你必须手工执行 element.init(type, filter) 方法即可。注意：2.1.6 开始，可以用 element.render(type, filter); 方法替代

1
2
3
4
5
6
var getTpl = demo.innerHTML
,view = document.getElementById('view');
laytpl(getTpl).render(data, function(html){
  view.innerHTML = html;
});
element.render();

结果：更新渲染后事件仍失效

官方文档给出了element.render()两个参数的说明：

  • 第一个参数：type，为表单的type类型，可选。默认对全部类型的表单进行一次更新，type类型包括tab/nav/breadcrumb/progress/collapse

  • 第二个参数：filter，为元素的 lay-filter=”” 的值。可以借助该参数，完成指定元素的局部更新

文档中明确说明，默认是对全部类型的表单进行更新。当要更新渲染的元素不是表单时，失效（这里不知道是不是文档的错误，也可能是我的理解错误）

亲测可行的解决方法：事件委托

由于模板引擎（laytpl）是动态渲染的，通过选择器直接绑定的事件会失效，要采用事件委托的方式

1
2
3
$("#dom").on("click", ".click-btn", function(){
    
});

事件委托导致表单多次提交

事件委托：把原本需要绑定在子元素的响应事件（click、keydown……）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡

由于事件冒泡，导致事件被多次执行，最终导致表单多次提交

解决方法：

  • 使用off()函数移除之前添加的事件处理程序
  • 不要在同一个父元素上绑定多个事件