jQuery实现为动态添加的元素绑定事件实例分析


Posted in jQuery onSeptember 07, 2018

本文实例讲述了jQuery实现为动态添加的元素绑定事件。分享给大家供大家参考,具体如下:

在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件。像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是无效的,具体写法如下。

$(selector).bind(event,data,function)
$(selector).click(function)
$("#searchMoveVideoResult ul li").bind("click",function(){
  $(this).css("border","5px solid #000");
});
$("#searchMoveVideoResult ul li").click(function(){
  $(this).css("border","5px solid #000");
});

为动态添加的元素绑定事件有以下几种方式:

1. delegate():向匹配元素的当前或未来的子元素附加一个或多个事件处理器

$(selector).delegate(childSelector,event,data,function)

目前大多数jquery版本都可用,不过我一般不用它。

$("#searchMoveVideoResult").delegate("ul li","click",function(){
  $(this).css("border","5px solid #000");
});
$("#searchMoveVideoResult").delegate("click","ul li",function(){
  $(this).css("border","5px solid #000");
});

看出它们的不同了吗,第二种写法是错误的,记住一定要把事件写在元素的后面。

2. live():为当前或未来的匹配元素添加一个或多个事件处理器

$(selector).live(event,data,function)

jquery1.8版本以前推荐使用该方法;jquery1.8版本之后就不建议使用了,我试了下,也是无效的,所以高版本的jquery推荐使用on()方法绑定事件。

$("#searchMoveVideoResult ul li").live("click",function(){
   $(this).css("border","5px solid #000");
});

3. on():适用于当前及未来的元素(比如由脚本创建的新元素)

$(selector).on(event,childSelector,data,function,map)

试验了下,大多数版本的jquery都是支持这个方法的,也是我比较喜欢使用的方法。

$("#searchMoveVideoResult").on("click","ul li",function(){
  $(this).css("border","5px solid #000");
});
//下面这样写就是错的了,一定要把动态添加的元素放到on()方法里面才行。
$("#searchMoveVideoResult ul li").on("click",function(){
  $(this).css("border","5px solid #000");
});

4.onclick事件:动态添加数据时,就为元素绑定onclick事件

function searchMoveVideo(){
  $.ajax({
    type:"POST",
    url:"http://op.juhe.cn/onebox/movie/video",
    data:{"q":$("#moveVideo").val(),"key":"346f79df993776748b242236464d565d"},
    dataType:"JSONP",
    success:function(data){
      console.log(data);
      if(data.error_code=="0"){
        var result=data.result;
        console.log(result);
        var html=result.title+"<br>"+result.tag+"<br>"+result.act+"<br>"+result.year+"<br>"                     +result.area+"<br>"+result.dir+"<br>"+result.desc;
        html+="<br><img src='"+result.cover+"'/><br>";
        html+='<ul style="list-style: none; float: left;">';
        var act_s=result.act_s;
        for(var i=0;i<act_s.length;i++){
          html+='<li style="float: left;" <span style="color:#cc0000;">onclick="showSource(this);"</span>><a target="_bla                        nk"><img src="'+act_s[i].image+'"><br>'+act_s[i].name+'</a></li>';
        }
        html+='</ul>'
        $("#searchMoveVideoResult").html(html);
      }else{
        $("#searchMoveVideoResult").html(data.reason);
      }
    }
  });
}

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 #jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 #jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 #jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 #jQuery
jQuery实现基本动画效果的方法详解
Sep 06 #jQuery
jQuery滑动效果实现方法分析
Sep 05 #jQuery
You might like
PHP实现图片简单上传
2006/10/09 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
清除输入框内的空格
2016/12/21 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
关于微信小程序登录的那些事
2019/01/08 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
python操作cfg配置文件方式
2019/12/22 Python
Python图像读写方法对比
2020/11/16 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
毕业求职自荐信格式是什么
2013/11/19 职场文书
仓库规划计划书
2014/04/28 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
初婚初育证明范本
2015/06/18 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS