在新建的 jQuery 对象上使用 .on()，然后 append 到页面上后不起效果

Question

大致过程如下：

1. var a = $('<div/>');
2. 给 a 里面塞入一些 html 元素
3. 在其中某个 html 元素上用 .on() a.find('.selector').on()
4. 因为一些原因需要将 a 最外面那层 div 使用a = a.html();移除，没有移除 .selector。
5. 将 a 插入页面，发现 .on() 不起效果

如果将第三步改成$(document).on()就行了。

但为啥直接在还没有加入页面的 jquery 对象上使用 .on() 就不行？
是因为最外层的 div 在 append 到页面之前被移除了还是啥其他原因？

Answer 1

首先是这样的，当你调用html()的时候返回的是一个string，而不是jQuery Object。所以当你将得到的string插入到document中的时候，自然是没有绑定的事件了。

其次还有一个疑问是，你说在第5步的时候将a插入到document中的，但是如果将第三步改成$(document).find(.selector).on()，这样的话，他根本就找不到.selector对应的dom，又怎么会添加成功呢？

Answer 2

移除的方法有问题吧，直接用a.html()感觉不会连带已绑定的事件，用unwrap试试看

Answer 3

这个叫事件委派，楼主查一下on的这个功能吧

Answer 4

$('XXX').delegate()'