解决jQuery动态创建元素绑定事件无作用问题

jQuery动态创建元素绑定事件无作用解决方案

• • （一）浏览器加载顺序（重点）
  • （二）普通写法演示（非动态）
  • （三）知道一些方法的具体表意
  • （四）错误的动态创建元素绑定事件的写法
  • （五）解决方案
  • （六）补充

    jQuery的出现，大大简化了js中的dom操作。
    当使用jQuery动态创建元素之后，想实现为动态创建出来的元素绑定相应事件。使用绑定click点击事件，但最后在浏览器中却发现创建出来的元素不响应！为什么/p>

（一）浏览器加载顺序（重点）

当浏览器下载完一个页面的时候

1. 首先开始渲染(翻译)HTML元素（标签）；
2. 其次CSS和JS代码全部加载完毕之后；
3. 最后再添加JS文件中所写的动态创建的HTML元素；

     注意：最后一步，只是添加你动态创建出来的元素；意思为：只会执行动态创建元素的那些代码，其它的代码在第一步和第二步时就已经执行完毕了！

    其它的代码：包括了，你为该动态创建出来的元素绑定事件做相关处理的代码，即最常用的写法：$(“动态创建出来的元素”).click(function(){相应功能});

    读者会发现，如果按照这个顺序执行，意思为，还没动态创建出需求的元素了，就执行了对该需求元素绑定相应事件的操作。能找到这个元素吗显然，根本找到不到！

    （相当于：你家媳妇孩子都没有生出来了，你就告诉送首饰的：把首饰亲手挂在我家女儿小闹脖子上。最后的结果会是：送首饰的过去了，找不到一个叫小闹的女孩子根本找不到啊，我挂谁着首饰又回去了！之后你家媳妇才顺利生出了一个女儿叫小闹。等你回去看，脖子上有首饰吗有！你怪谁

执行步骤：
    当浏览器解析到1步骤页面元素时，解析到JS的这些绑定标签事件的JS代码的时候，发现这些绑定事件的标签元素还没有生成，（因为js代码加载完后，才会动态创建出这些标签），所以这些JS 代码的绑定事件，根本就没有绑定到这些动态加载的标签上，所以事件不会触发。

（二）普通写法演示（非动态）

演示:为已经存在的按钮元素添加click单机事件，单机后会在页面弹出”添加成功!“窗口。

（三）知道一些方法的具体表意

这里我们先暂时只罗列常用的能够处理单机的事件方法

一般情况下；通常都写为:
     $(document).on…
     $(document).delegate…
使用事件委托的方式，将指定的事件处理器直接绑定在document上

$().on()的知识点补充：
    从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
     $().on()结合了这三个方法的优势摒弃了劣势。

jQuery更多事件方法参考手册（W3school）

（四）错误的动态创建元素绑定事件的写法

    容易看出，上面的方法列表中，着色强调了，当前与未来的元素字眼。下面演示经常疏忽的错误写法，直接用click单机事件为未来元素绑定此事件并做相应逻辑处理：

    结合（一）（二）（三）可知，这样调用click单击事件附着在未来（动态创建）的元素上，是错误的写法，点击创建出来的清空购物车按钮，不会响应！

（五）解决方案

读者可以结合自身习惯运用上述给出的，可以使用在未来元素身上的方法；
官方推荐使用on()方法，编者也习惯用on()方法，所以以下用on()方法举例：

（六）补充

读者一定发现，（三）中：

一般情况下；通常都写为:
     $(document).on…
     $(document).delegate…
使用事件委托的方式，将指定的事件处理器直接绑定在document上

是什么意思br>     每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中（包括js技术）对 HTML 页面中的所有元素进行访问。
    这是对document的解释；意思是，只要浏览器加载HTML文档时，就知道应该为其绑定一个on()事件处理器。
    至于什么时候触发，以及触发的动作效果是什么样子的，应该在on()事件处理器里面的参数给出指定。指定触发什么事件、指定哪个元素触发、指定触发的这个事件后的具体逻辑…
    读者可以自己继续思考为什么要写document，可以写body吗者，可以写其它的吗strong>读者一定要理清楚浏览器的加载顺序！

来源：一封信笺等一前缘