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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
jquery append与appendTo方法比较
May 24 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jquery实现轮播图特效
Apr 12 jQuery
使用jquery实现轮播图效果
Jan 02 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(5) 类和对象
2010/02/16 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
php实现文件上传基本验证
2020/03/04 PHP
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
python实现NB-IoT模块远程控制
2018/06/20 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
使用Python进行目录的对比方法
2018/11/01 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
父亲八十大寿答谢词
2014/01/23 职场文书
社区七一党员活动方案
2014/01/25 职场文书
趣味运动会活动方案
2014/02/12 职场文书
机关单位动员会主持词
2014/03/20 职场文书
ktv好的活动方案
2014/08/17 职场文书
2016年国培研修日志
2015/11/13 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python