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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jquery append与appendTo方法比较
May 24 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
基于jQuery拖拽事件的封装
Nov 29 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木马webshell扫描器代码
2012/01/25 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
jquery validate demo 基础
2015/10/29 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python数字图像处理之高级形态学处理
2018/04/27 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
python interpolate插值实例
2020/07/06 Python
python爬虫请求头设置代码
2020/07/28 Python
Python识别验证码的实现示例
2020/09/30 Python
Python类型转换的魔术方法详解
2020/12/23 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
电子邮箱格式怎么写
2014/01/12 职场文书
求职信模板怎么做
2014/01/26 职场文书
丑小鸭教学反思
2014/02/03 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android