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

题主我是PHPer,前端纯渣,还请各位不吝赐教

用最流行的CSS框架Bootstrap和最近遇到的问题举个例子

最近一个项目是管理后台,典型的三栏布局,即顶部导航栏左侧菜单右侧内容

对方的服务器配置很渣,这种时候显然用PJAX可以提升使用体验,也就是点击菜单,发起AJAX请求到后台获取到对应的html代码后输出到右侧内容区

那么问题来了,实际使用后我发现,只要是涉及到JS插件的,统统无法使用。例如这个工具提示,如果我是用AJAX获取这些HTML代码并输出到页面的话,工具提示就没有任何效果了

初步猜测是因为这些JS插件只在页面加载完毕后绑定对应事件,所以AJAX获取HTML代码并输出后才会没有对应效果

那么我该怎么为这些AJAX获取到的HTML代码绑定上对应事件呢?求问

补充一下,Jquery的on方法我是会用的。但如上面的链接里面一样,人家的HTML代码是

根本就不含任何JS,是bootstrap在网页加载完毕后自动对它绑定事件的。因此我根本不知道这个按钮被绑定了什么事件,自然也就无法用on方法之类的东西

迷茫
迷茫

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

reply all (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....
              Latest Downloads
              More>
              Web Effects
              Website Source Code
              Website Materials
              Front End Template
              About us Disclaimer Sitemap
              php.cn:Public welfare online PHP training,Help PHP learners grow quickly!