jquery-pjax 加载页面 js监听 动态生成dom 事件多次绑定

Question

有人问这个是什么 pjax 是jquety 封装的类似ajax请求 实现局部页面加载
后端用到的多 为了优化用户体验
https://github.com/defunkt/jq...

因为局部页面要监听js 动态生成dom 我使用如下jquery
$(document).on('click',function)....
出现重复加载click事件
如果使用 off 解绑
则会导致不是pjax加载页面的click事件也解绑了
如何解决呢?

Answer 1

$(document).on('click',function)这样写的话是监听整个文档的事件，如果你想监听局部的动态DOM事件，可以这么做：
1：找到这个局部DOM
2：找到动态DOM的公共父节点，保证这个父节点不是动态生成的
3：将事件委托到这个父节点上，例如$(parent).on('click',function)
这个原理是事件冒泡，事件会一层一层的向上传递直至根节点，当冒泡到某个父节点时，你就可以操作了

Answer 2

保证是每一个页面有唯一的父元素(.special-root-1)，这样给某一个页面绑定的click事件监听器就不会被不相关元素（另一个页面.special-root-2）的点击事件触发了
$(document).on("click", ".special-root-1 .some-other-containers .certain-button", function(){/* click handler */})