首先是网上搜的一些文档说明:
.delegate()
Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
详细情况可以去http://api.jquery.com/delegate/查看哈。
应用场景:
如图中示例:金属材料—>金属结构—>其它结构—>铝合金结构 是一个4层的结构。
因为和“金属材料”一样的根结构还有很多,如果一次性将他们的子孙结构都一并加载到页面中将会耗时很多,此时,可能都会想到利用单击事件然后通过ajax加载个子的子类别。
树形结构根结构代码如图:
这个时候如果,我们把子节点的单击事情通过jQuery的onclick来绑定的话就会遇到一个问题,那就是,当用户点击多个子节点后就会出现脚本重复加载的问题,这时候单击后的显示效果就可能不是我们所能预计与掌控的,这时候用delegate就比较合适了。
代码截图
代码中对于是否含有子节点做了下判断,这一点也是为了防止重复执行动态加载,已加载完的内容,在不刷新页面的情况下是存在的所以就没必要再加载一遍了。
头一次写这东西,文笔不好,望各位看官们谅解下。