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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 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
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
PHP中读写文件实现代码
2011/10/20 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python局部赋值的规则
2013/03/07 Python
python中的print()输出
2019/04/12 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
python3 enum模块的应用实例详解
2019/08/12 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Python socket聊天脚本代码实例
2020/01/02 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
Python PIL库图片灰化处理
2020/04/07 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
2014各大专业毕业生自我评价
2014/09/17 职场文书
国际贸易实训报告
2014/11/05 职场文书
最感人的道歉情书
2015/05/12 职场文书
入党积极分子考察意见
2015/06/02 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis