给动态添加的元素绑定事件

on()方法

jQuery的on()方法即可完成给页面上动态添加的元素绑定事件。

$(选择器1).on(events,选择器2,function(event){
    // do something...
});

• 参数解释

  • 选择器1：页面上非动态生成祖先元素选择器。动态添加的元素一定是页面上非动态生成的某个元素的后代元素，所以选择器1就是动态生成的后代元素所属的祖先元素的选择器。
  • 选择器2：动态生成的元素的选择器。
  • events：事件。可同时绑定多个事件，多个事件之间用空格隔开。
  • function(event){// do something…}：事件的回调函数。

• 示例：

  • 情景：数据表格是可编辑的，当点击某个可编辑的数据时，input输入框才会动态生成。
  • ".layui-body"：选择器对应的DOM是页面上已经存在的元素
  • ":input"：选择器对应的DOM是点击可编辑数据时动态生成的input输入框
  • "input propertychange"：同时绑定了两个事件input和propertychange事件

  //实时监听数据表格中的数据内容
  $(".layui-body").on("input propertychange",":input",function(event){
  console.log(this.value);
  });