jQuery on() 方法为选定已存在元素和未来元素绑定标准事件和自定义事件

Posted 2021-01-25 鹰击长空，万类霜天竞自由！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery on() 方法为选定已存在元素和未来元素绑定标准事件和自定义事件相关的知识，希望对你有一定的参考价值。

很有必要说说jQuery的on方法，这个方法存在大乾坤大奥秘，主要注意两点：

1、为已存在元素和未来元素（动态添加元素）绑定处理函数。

2、自定义一个非标准的事件并绑定处理函数。

定义和用法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

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

实例1：在元素上添加自定义事件，就是绑定一个自定义事件

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/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"]);
  });
});
</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="https://cdn.staticfile.org/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 style="background-color:yellow">
<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() 方式可以。

jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件

定义和用法

更多实例

jQuery on() 方法为选定已存在元素和未来元素绑定标准事件和自定义事件