jQuery 的on()方法
2024-09-05 05:39:11
jQuery 的on()方法
一、总结
一句话总结:
1、普通添加事件:$("a").on("click", function () {执行的代码})
2、未创建元素:$("body").on("click", "a", function (e) {执行的代码})
3、传递参数:$("p").on("click", { "txt": "文本" }, function (e) {$("a").text(e.data.txt);})
1、jquery的on方法给元素添加事件?
$("a").on("click", function () {执行的代码})
$("a").on("click", function () {
console.log(0)
})
2、jquery的on方法给未创建的元素添加事件?
$("body").on("click", "a", function (e) {执行的代码})
$("body").on("click", "a", function (e) { });
3、jquery的on方法传递参数?
$("p").on("click", { "txt": "文本" }, function (e) {$("a").text(e.data.txt);})
$("p").on("click", { "txt": "文本" }, function (e) {
$("a").text(e.data.txt);
})
4、jquery的on方法 给未创建的元素添加事件 实例?
给新添加的元素hidden_panel类添加点击事件:$("body").on("click", ".hidden_panel", function (e) { 执行的代码 });
<script>
$(function () {
$("body").on("click", ".hidden_panel", function (e) {
$(this).children(".panel-body").toggle();
$(this).children(".panel-footer").toggle();
$(this).find(".panel-heading_symbol_left").toggle();
$(this).find(".panel-heading_symbol_down").toggle();
});
});
</script>
二、jQuery on()方法使用
转自或参考:jQuery on()方法使用
https://www.cnblogs.com/sntetwt/p/10758176.html
jQuery on()方法
基本语法:
语法结构一:
$(selector).on(event,function)
语法结构二:
$(selector).on(events,[selector],[data],function)
语法结构三:
$(selector).on(object,[selector],[data])
结构一:
$("a").on("click", function () {
console.log(0)
})
结构二[selector],适用于未创建的元素:
$("body").on("click", "a", function (e) { });
结构二[data],函数传递:
$("p").on("click", { "txt": "文本" }, function (e) {
$("a").text(e.data.txt);
})
结构三{object},绑定不同函数:
$("p").on({
click: function () { $(this).css("color", "green"); },
mouseover: function () { $(this).css("color", "red"); },
mouseout: function () { $(this).css("color", "black"); },
});
off()方法,解除绑定
$("body").on("click","a",function(){
$("a").off("click");
})
one()方法,绑定一次
$("a").one("click",function(){ });
trigger()方法,关联事件
$("p").click(function () {
$("a").trigger("click");
});
$("a").on("click", function () {
console.log(0)
});
最新文章
- Jedis的使用
- 浅谈php对api开发的作用
- 使用java注解的例子有没有
- 转载 hashmap java8前的原理实现
- Android ActionBar详解(一)--->;显示和隐藏ActionBar
- python Django之Ajax
- hydra用法
- CentOS7学习记录(工具使用篇)
- win10系统 安装好composer后 cmd 命令行下输入composer提示不是内部或外部的命令,也不是可执行的程序或批处理文件
- Vue.js路由
- Matlab feval函数(转)
- intel 汇编中断解释
- 用mappedbytebuffer实现一个持久化队列【转】
- SVNKit学习——Setting Up A Subversion Repository 创建仓库(三)
- Spring的入门学习笔记 (AOP概念及操作+AspectJ)
- [POJ 1739] Tony&#39;s Tour
- printf、sprintf与fprintf 的用法区分
- Spring获取HttpServletRequest
- C++ List的用法(转载)
- WinForm搭载ScintillaNET时文本由于发生偏移被隐藏解决方案