登录  /  注册
javascript - 使用一些CSS框架+AJAX时，如何给AJAX动态添加的HTML控件绑定事件？
迷茫
迷茫 2017-04-10 17:52:48
[JavaScript讨论组]
0 6 662
举报

题主我是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)
怪我咯
怪我咯2017-04-10 17:54:48 6楼

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

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

alert("click");

})

tooltip插件的话新生成的组建需要重新初始化
$('[data-toggle="tooltip"]').tooltip()
在ajax的回调里加上这句就行了
赞 +0
添加回复
伊谢尔伦
伊谢尔伦2017-04-10 17:54:48 5楼

用Jquery 的bind 方法

success: function(data) {
    elem.replaceWith(data);
    $('.active').bind('click', /* some function needs to go here*/);
}
赞 +0
添加回复
黄舟
黄舟2017-04-10 17:54:48 4楼

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

$('body').delegate('.el','click' func);
赞 +0
添加回复
大家讲道理
大家讲道理2017-04-10 17:54:48 3楼

采用事件委托，通过已存在的父元素来为动态添加的子元素绑定事件
赞 +0
添加回复
PHPz
PHPz2017-04-10 17:54:48 2楼

两种方法

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

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

第二个参数就是动态生成的元素标识符
赞 +0
添加回复
天蓬老师
天蓬老师2017-04-10 17:54:48 1楼

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

....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....
赞 +0
添加回复
专题推荐
更多>
热门话题
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部