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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery实现朋友圈查看图片
Sep 11 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
How do I change MySQL timezone?
2008/03/26 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
学习并汇集javascript匿名函数
2010/11/25 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
银行演讲稿范文
2014/01/03 职场文书
青春寄语大全
2014/04/09 职场文书
师德师风个人反思
2014/04/28 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
课程设计的心得体会
2014/09/03 职场文书
群众路线调研报告范文
2014/11/03 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
2015年读书月活动总结
2015/03/26 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
全国助残日活动总结
2015/05/11 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL