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) });