题主我是PHPer,前端纯渣,还请各位不吝赐教
用最流行的CSS框架Bootstrap
和最近遇到的问题举个例子
最近一个项目是管理后台,典型的三栏布局,即顶部导航栏、左侧菜单和右侧内容
对方的服务器配置很渣,这种时候显然用PJAX
可以提升使用体验,也就是点击菜单,发起AJAX请求到后台获取到对应的html代码后输出到右侧内容区
那么问题来了,实际使用后我发现,只要是涉及到JS插件的,统统无法使用。例如这个工具提示,如果我是用AJAX获取这些HTML代码并输出到页面的话,工具提示就没有任何效果了
初步猜测是因为这些JS插件只在页面加载完毕后绑定对应事件,所以AJAX获取HTML代码并输出后才会没有对应效果
那么我该怎么为这些AJAX获取到的HTML代码绑定上对应事件呢?求问
补充一下,Jquery的on方法我是会用的。但如上面的链接里面一样,人家的HTML代码是
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
根本就不含任何JS,是bootstrap在网页加载完毕后自动对它绑定事件的。因此我根本不知道这个按钮被绑定了什么事件,自然也就无法用on方法之类的东西
delegate已经过时了 不久之后就会废弃掉
用on就可以了
$("#targetid").on("click",".btn",function(){
})
tooltip插件的话新生成的组建需要重新初始化
$('[data-toggle="tooltip"]').tooltip()
在ajax的回调里加上这句就行了
用Jquery 的bind 方法
用jQuery delegate 楼主可以搜索跟多关于 事件代理的内容
$('body').delegate('.el','click' func);
采用事件委托,通过已存在的父元素来为动态添加的子元素绑定事件
两种方法
ajax回调成功后手动绑定事件
2.使用jquery的事件委托代理机制,关于事件委托,在1.7版本之前使用的是delegate,但在之后的版本中已经被on取代了,不仅仅是delegate,像bind、live等官方都不建议直接使用,而是使用on。
使用方法也很简单
$('p').on('click', '.dynamicSelector', function() {});
第二个参数就是动态生成的元素标识符
很多人都讲了事件委托,但有时情况更加复杂,委托并不那么好用。
我提供另一个方法,如下: