jquery未来元素事件绑定问题

Question

jquery未来元素事件绑定遇到问题，本来应该使用on 和live delegate去解决，但是未来元素是经过ajax请求后异步添加到页面中的，导致事件绑定失败，有什么办法吗？

Answer 1

你这就是事件委托的问题，jQuery支持两种方式，live和on的事件委托。

事件委托案例：http://runjs.cn/code/fh3uc0nu

在jQuery 1.7以后对于live的官方已经不推荐使用，后续的有些版本中已经移除。

Answer 2

动态（未来）的dom事件注册用on是肯定的。

在父元素上注册事件也是肯定的。

原理是动态添加的子元素的事件会冒泡到父元素，然后on方法第二个参数过滤到真正要处理的元素时触发事件回调方法。

如果不管用，看是不是动态的子元素上阻止了事件的传播冒泡，如：event.preventdefault()

然后如果父元素级别比较高，看看是不是中间的父元素阻止事件冒泡了。

还有看看父元素上是不是事件注册覆盖了（注册了多个相同的事件，如果是这样可以搜索：jquery 事件命名空间看看）

推荐在直接父级注册（当然这个父级不能是动态的），使用#id选择器。

Answer 3

如果是你动态添加的，自然也需要重新注册一下事件。

Answer 4

引用来自“浮生壹日”的评论

$(parent-node).on(event-type,future-node,event-function)

parent-node一定要在页面上，不能是ajax请求的了

试试

Answer 5

$(body).on()我试过了，确实不行，主要元素是ajax请求后加入的，而我绑定事件的js写在ajax请求之前，所以考虑未来元素事件绑定，需求有些特殊，所以现在尴尬了 - -

Answer 6

$(body).on('click','.future',function(){
    //TODO
});

Answer 7

应该用不了未来事件绑定了，

建议ajax请求完成，加载成功之后，再绑定一次。

Answer 8

$(document).on('click','.future',function(){
    //TODO
});

Answer 9

正解，保证parent-node是ajax加载html的父节点，那么ajax加载到的html也可以被监听。

Answer 10

$(parent-node).on(event-type,future-node,event-function)

parent-node一定要在页面上，不能是ajax请求的了

试试