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 submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 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函数解决SQL injection
2006/10/09 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
js 加载时自动调整图片大小
2008/05/28 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
javascript实现扫雷简易版
2020/08/18 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
python基础教程之缩进介绍
2014/08/29 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
深入浅析Python中的迭代器
2019/06/04 Python
pandas的qcut()方法详解
2019/07/06 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
python操作toml文件的示例代码
2020/11/27 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
Java的基础面试题附答案
2016/01/10 面试题
幼儿园教师自我鉴定
2014/03/20 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
公司老总年会致辞
2015/07/30 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers