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-data的三种用法
Apr 18 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
如何在vue 中引入使用jquery
Nov 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
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
ubuntu中配置pyqt4环境教程
2017/12/27 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python3标准库总结
2019/02/19 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
仓库规划计划书
2014/04/28 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
贷款承诺书范文
2014/05/19 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
公司开除员工通知
2015/04/22 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
MySQL kill不掉线程的原因
2021/05/07 MySQL