Jquery1.7+绑定事件on()方法使用案例

Jquery绑定事件后很多中方式bind()、live()、delegate()、on(),实际应用中比较推荐采用on()的方式去处理,具有较高的自定义组合能力,本文对on()详解

所属分类 WEB

相关标签 JQuery方法绑定

关于on()方法

自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品。

on()方法带来很多便利,应用过程中推荐使用该方法,简化了Jquery代码库。

on()方法添加的事件处理程序适用于当前及未来的元素(比如动态创建的元素)。

如需移除事件处理程序,请使用 off() 方法。

如需添加只运行一次的事件然后移除,请使用 one() 方法。

方法参数

$(selector).on(event,childSelector,data,function)
//selector(必须)元素选择器(必须)
//event(必须)绑定事件,支持多个事件(空格分隔多个事件值,也可以是数组)
//childSelector(选用)子元素选择器
//data(选用)传递到函数的额外数据
//function(选用)事件发生时运行的函数

基本实例

$(document).ready(function(){
    //一般情况下on用于页面dom初始化完成进行绑定
    //支持绑定动态产生的节点
    $("p").on("click",function(){
        alert("段落被点击了。");
    });
});

组合实例

//绑定点击事件
$("p").on("click",function(){
    alert("段落被点击了。");
});

//绑定多个事件1
$("p").on("click change",function(){
    alert("段落被点击或修改。");
});

//绑定多个事件2
$("p").on(["click","change"],function(){
    alert("段落被点击或修改。");
});

//绑定子元素
$("p").on("click","span",function(){
    alert("段落的SPAN子元素被点击了。");
});

//绑定传递参数
$("p").on("click","span",{"name":123},callBack);
function callBack(e)
{
    alert("接受参数:"+event.data.name);
}

小结

Jquery中的.on("click")和.click()二者在绑定静态控件时没有区别。

但是如果面对动态产生的控件,只有on()能成功的绑定到动态控件中。

$("#add").click(function(){ 
    $(".li").append('<li>动态添加元素on<button class="del">del</button></li>'); 
});

//无法绑定成功
$(".del").click(function(){ 
    $(this).parent().remove(); 
}); 

//可以绑定并触发
$(".li").on(“click“, ".del", function(){
    $(this).parent().remove(); 
})

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

CSS文字超出隐藏添加省略号及失效处理

在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案

CSS3通过Gradients实现渐变背景色

使用背景色渐变可以使得页面质感得到大幅度提升,CSS样式中通过gradients属性指定两个或多个颜色之间平滑过渡,由于颜色的渐变是由浏览器生成,因此不会出现不同分辨率下失真的情况。

侧边栏下滑即将越过时动态固顶与上滑恢复

对于很多二栏布局的网站而言,正文部分过长时,侧边栏区域下拉过程中出现大片空白,因此我们可以实现当屏幕下滑达到指定元素位置(如即将越过)后对元素固顶来解决侧边栏区域的空旷感

Jquery.bind()实现前端字段公共校验器

严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()

Vue3中无需引入Vuex的替代方案

Vue3 中所提供组合 API、ref、reactive、provide、inject几大特性,可以支持完成全局状态管理能力,Vuex 是为 Vue 单独提供的状态管理插件,相对比较笨重,如果项目简单可以尝试替代

Jquery+CSS轻松实现导航动态显示隐藏

绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核