javascript - 使用一些CSS框架+AJAX时,如何给AJAX动态添加的HTML控件绑定事件?
迷茫
迷茫 2017-04-10 17:52:48
0
6
826

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

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

모든 응답(6)
刘奇

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

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

alert("click");

})


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

伊谢尔伦

用Jquery 的bind 方法

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

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

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

大家讲道理

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

PHPzhong

两种方法

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

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

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

Peter_Zhu

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

....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....
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿