问题描述：

假设我们的网页中动态生成了一个按钮，在这个按钮生成之前我们按照一般的事件绑定方法为此按钮绑定了触发事件，但是问题是绑定的事件并没有生效（JavaScript中为元素绑定的事件失效）

分析

1.首先我们来看一下这个按钮是怎么回事：

问题中按钮有一个很关键的特性：动态生成，也就是说是在网页加载完成之后执行某些操作才产生的，它一开始是不存在的；

2.然后我们来分析一下事件的绑定

对于动态生成的元素，它不同于一般的网页既有元素，它的事件绑定不能通过普通的事件绑定实现。

3.关于JavaScript事件绑定的小解（针对本题盗图解析）

这里写图片描述

由图中我们可以看到事件冒泡即由最具体的元素（文档嵌套最深节点）接收，然后逐步上传至document

事件捕获会由最先接收到事件的元素然后传向最里边（我们可以将元素想象成一个盒子装一个盒子，而不是一个积木堆积）

然后我们进入dom事件流

DOM2级事件规定事件包括三个阶段：

① 事件捕获阶段

② 处于目标阶段

③ 事件冒泡阶段

我们分析一下第一阶段就可以知道为什么了，js中一般事件绑定是在网页生成的时候针对具体元素去绑定的，那么请问：网页初始生成时按钮存在吗？答：NOP。这就是为什么事件没有绑定上去，因为都没找到元素啊啊啊啊啊，绑个毛线

解决方法（jQuery on方法）

通过将事件绑定到存在的父元素上让子元素的事件有效

jQuery on用法格式：

$(selector).on(event,childSelector,data,function,map)

示例，比如说id为btn的元素为动态生成，它的父元素为btnParent(必须是网页加载时就有的元素，也可以直接绑定到body上去)那么我们可以这样为它绑定处理事件

$("#btnParent").on("click","#btn",function(){
  console.log('binded!');
 });

如果想要更深层次的理解，那么请跟我一起阅读一下jQuery.on()的源码实现

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
  var type, origFn;

  // 类型可以使类型映射或者句柄映射
  if ( typeof types === "object" ) {
    // ( types-Object, selector, data )
    if ( typeof selector !== "string" ) {
      // ( types-Object, data )
      data = data || selector;
      selector = undefined;
    }
    // 遍历types对象，针对每一个属性绑定on()方法
    // 将types[type]作为fn传入
    for ( type in types ) {
      this.on( type, selector, data, types[ type ], one );
    }
    return this;
  }

  // 参数修正
  // jQuery这种参数修正的方法很好
  // 可以兼容多种参数形式
  // 可见在灵活调用的背后做了很多处理
  if ( data == null && fn == null ) {
    // ( types, fn )
    fn = selector;
    data = selector = undefined;
  } else if ( fn == null ) {
    if ( typeof selector === "string" ) {
      // ( types, selector, fn )
      fn = data;
      data = undefined;
    } else {
      // ( types, data, fn )
      fn = data;
      data = selector;
      selector = undefined;
    }
  }
  if ( fn === false ) {
    // fn传入false时，阻止该事件的默认行为
    // function returnFalse() {return false;}
    fn = returnFalse;
  } else if ( !fn ) {
    return this;
  }

  // one()调用on()
  if ( one === 1 ) {
    origFn = fn;
    fn = function( event ) {
      // Can use an empty set, since event contains the info
      // 用一个空jQuery对象，这样可以使用.off方法，
      // 并且event带有remove事件需要的信息
      jQuery().off( event );
      return origFn.apply( this, arguments );
    };
    // Use same guid so caller can remove using origFn
    // 事件删除依赖于guid
    fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
  }

  // 这里调用jQuery的each方法遍历调用on()方法的jQuery对象
  // 如$('li').on(...)则遍历每一个li传入add()
  // 推荐使用$(document).on()或者集合元素的父元素
  return this.each( function() {
    jQuery.event.add( this, types, fn, data, selector );
  });
},

关于jQuery还有很多其他的事件绑定方法，当然不一定适用，也提一下

.bind(), .live(), .delegate()

但是说到底.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的

我们看一下jQuery的.bind(), .live(), .delegate()的实现源码就清楚了

jQuery.fn.extend( {

  bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
    //注意this.on()
  },
  unbind: function( types, fn ) {
    return this.off( types, null, fn );
    //注意this.off()
  },

  delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
  },
  undelegate: function( selector, types, fn ) {
    return arguments.length === 1 ?
      this.off( selector, "**" ) :
      this.off( types, selector || "**", fn );
  }
} );

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js  # 动态绑定  # vue.js删除动态绑定的radio的指定项  # vue.js选中动态绑定的radio的指定项  # AngularJS 单选框及多选框的双向动态绑定  # 详解Vue.js动态绑定class  # AngularJS动态绑定HTML的方法分析  # AngularJS单选框及多选框实现双向动态绑定  # Chrome扩展页面动态绑定JS事件提示错误  # Javascript动态绑定事件的简单实现代码  # js循环动态绑定带参数函数遇到的问题及解决方案[转]  # javascript下动态this与动态绑定实例代码  # 绑定  # 遍历  # 都是  # 是在  # 我们可以  # 来实现  # 是一个  # 加载  # 很好  # 在这个  # 句柄  # 这就是  # 都没  # 其他的  # 推荐使用  # 而不  # 不存在  # 可以看到  # 问题是  # 可以直接 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： php json中文编码为null的解决办法  如何在云主机上快速搭建网站？  如何在万网主机上快速搭建网站？  Python文件流缓冲机制_IO性能解析【教程】  如何用免费手机建站系统零基础打造专业网站？  Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程  如何用JavaScript实现文本编辑器_光标和选区怎么处理  Laravel Debugbar怎么安装_Laravel调试工具栏配置指南  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  今日头条AI怎样推荐抢票工具_今日头条AI抢票工具推荐算法与筛选【技巧】  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  Laravel如何处理跨站请求伪造（CSRF）保护_Laravel表单安全机制与令牌校验  如何在腾讯云服务器快速搭建个人网站？  Python高阶函数应用_函数作为参数说明【指导】  INTERNET浏览器怎样恢复关闭标签页_INTERNET浏览器标签恢复快捷键与方法【指南】  Laravel中间件如何使用_Laravel自定义中间件实现权限控制  用yum安装MySQLdb模块的步骤方法  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  如何正确选择百度移动适配建站域名？  音响网站制作视频教程,隆霸音响官方网站？  手机软键盘弹出时影响布局的解决方法  如何为不同团队 ID 动态生成多个“认领值班”按钮  网站建设要注意的标准 促进网站用户好感度！  JS实现鼠标移上去显示图片或微信二维码  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  如何快速查询网址的建站时间与历史轨迹？  java ZXing生成二维码及条码实例分享  Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  网站优化排名时，需要考虑哪些问题呢？  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  Python并发异常传播_错误处理解析【教程】  如何基于云服务器快速搭建个人网站？  如何快速登录WAP自助建站平台？  Windows10如何删除恢复分区_Win10 Diskpart命令强制删除分区  教你用AI润色文章，让你的文字表达更专业  Laravel怎么生成二维码图片_Laravel集成Simple-QrCode扩展包与参数设置【实战】  大同网页,大同瑞慈医院官网？  Laravel怎么为数据库表字段添加索引以优化查询  Laravel怎么上传文件_Laravel图片上传及存储配置  齐河建站公司：营销型网站建设与SEO优化双核驱动策略  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程  如何用搬瓦工VPS快速搭建个人网站？  什么是JavaScript解构赋值_解构赋值有哪些实用技巧  Laravel中的Facade(门面)到底是什么原理  PythonWeb开发入门教程_Flask快速构建Web应用  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  如何在Windows 2008云服务器安全搭建网站？