jQueryon（）⽅法为选定已存在元素和未来元素绑定标准事件
和⾃定义事件
很有必要说说jQuery的on⽅法，这个⽅法存在⼤乾坤⼤奥秘，主要注意两点：
1、为已存在元素和未来元素（动态添加元素）绑定处理函数。
2、⾃定义⼀个⾮标准的事件并绑定处理函数。
定义和⽤法
on() ⽅法在被选元素及⼦元素上添加⼀个或多个事件处理程序。
⾃ jQuery 版本 1.7 起，on() ⽅法是 bind()、live() 和 delegate() ⽅法的新的替代品。该⽅法给 API 带来很多便利，我们推荐使⽤该⽅法，它简化了 jQuery 代码库。
注意：使⽤ on() ⽅法添加的事件处理程序适⽤于当前及未来的元素（⽐如由脚本创建的新元素）。
提⽰：如需移除事件处理程序，请使⽤⽅法。
提⽰：如需添加只运⾏⼀次的事件然后移除，请使⽤⽅法。
实例1：，就是绑定⼀个⾃定义事件
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName + "! What a beautiful name!").show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);jquery在一个元素后追加标签
});
});
</script>
</head>
<body>
<button>Trigger custom event</button>
<p>Click the button to attach a customized event on this p element.</p>
</body>
</html>
测试运⾏，请
实例2：，绑定处理⽅法时，元素还不存在
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>This is a new paragraph.</p>").insertAfter("button");
});
});
</script>
</head>
<body>
<div >
<p>This is a paragraph.</p>
<p>Click any p element to make it disappear. Including this one.</p>
<button>Insert a new p element after this button</button>
</div>
</body>
</html>
on() 和 click() 的区别:
⼆者在绑定静态控件时没有区别，但是如果⾯对动态产⽣的控件，只有 on() 能成功的绑定到动态控件中。
以下实例中原先的 HTML 元素点击其⾝后的 Delete 按钮就会被删除。⽽动态添加的 HTML 元素，使⽤ click() 这种写法，点击 Delete 按钮⽆法删除；使⽤ On() ⽅式可以。
更多实例
如何使⽤ on() 来达到与 bind() 相同的效果。
如何使⽤ on() 来达到与 delegate() 相同的效果。
如何使⽤ on() 来达到与 live() 相同的效果。
如何向元素添加多个事件处理程序。
如何使⽤ map 参数向被选元素添加多个事件处理程序。
如何在元素上添加⾃定义命名空间事件。
如何向函数传递数据。
演⽰ on() ⽅法也适⽤于尚未创建的元素。
如何使⽤ off() ⽅法移除事件处理程序。
参考原⽂：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。