javascript - 使用一些CSS框架+AJAX时，如何给AJAX动态添加的HTML控件绑定事件？

Question

题主我是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方法之类的东西

Answer 1

delegate已经过时了 不久之后就会废弃掉
用on就可以了

$("#targetid").on("click",".btn",function(){

alert("click");

})

---

tooltip插件的话新生成的组建需要重新初始化
$('[data-toggle="tooltip"]').tooltip()
在ajax的回调里加上这句就行了

Answer 2

用Jquery 的bind 方法

success: function(data) {
    elem.replaceWith(data);
    $('.active').bind('click', /* some function needs to go here*/);
} 

Answer 3

用jQuery delegate 楼主可以搜索跟多关于 事件代理的内容

$('body').delegate('.el','click' func);

Answer 4

采用事件委托，通过已存在的父元素来为动态添加的子元素绑定事件

Answer 5

两种方法

1. ajax回调成功后手动绑定事件
   2.使用jquery的事件委托代理机制，关于事件委托，在1.7版本之前使用的是delegate，但在之后的版本中已经被on取代了，不仅仅是delegate，像bind、live等官方都不建议直接使用，而是使用on。

使用方法也很简单
$('p').on('click', '.dynamicSelector', function() {});

第二个参数就是动态生成的元素标识符

Answer 6

很多人都讲了事件委托，但有时情况更加复杂，委托并不那么好用。
我提供另一个方法，如下:

....code....

var $box = $('#box');
$.post(url, {'q':q[index], 'r':op.r}, function(data) {
        $box.html(data);
        $(function() {
          var $title = $('p.title');
          //p.title 是 data 中的数据
          $title.on('click', function() {
            //code
          });
        });
        
        ....code....