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实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jquery实现进度条状态展示
Mar 26 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 缓存实现代码及详细注释
2010/05/16 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
python类参数self使用示例
2014/02/17 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
如何利用python读取micaps文件详解
2020/10/18 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
八年级美术教学反思
2014/02/02 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers