自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();
})
当前还没有观点发布,欢迎您留下足迹!
在业务中我们会出现不同的项目依赖与不同版本的 node.js,总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖,使用 nvm 可以让多个版本的 node.js 共存,并提供管理和切换
自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品,我们推荐使用on()来处理业务中的事件绑定,通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在
严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()
绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果
跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码
HTML 中加载 SVG 有很多种方式,但如果需要在 HTML 中通过 CSS 样式自由控制 SVG 样式就必须将 svg 标签插入网页找那个成为 DOM 的一部分,本文借助 SVGInject 插件可以快速完成这一操作