In jquery, because you need to add one or more event handlers to the selected elements and sub-elements, you need to use the on() method; the event handlers added by this method are suitable for current and future Element, the syntax is "element object.on(event, event handler of child element, additional data, function)".
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
on() method to add one or more event handlers on selected elements and sub-elements.
Since jQuery version 1.7, the on() method is the new replacement for the bind(), live(), and delegate() methods. This method brings a lot of convenience to the API and is recommended because it simplifies the jQuery code base.
Note: Event handlers added using the on() method apply to current and future elements (such as new elements created by scripts).
Tip: If you need to remove the event handler, use the off() method.
Tip: If you need to add an event that only runs once and then remove it, use the one() method.
Syntax
$(selector).on(event,childSelector,data,function)
event Required. Specifies one or more events or namespaces to be added from the selected element. Multiple event values separated by spaces, can also be an array. Must be a valid event.
childSelector Optional. Specifies that event handlers can only be added to specified child elements (and not the selector itself, such as the deprecated delegate() method).
data Optional. Specifies additional data to be passed to the function.
function Optional. Specifies a function to run when an event occurs.
The example is as follows:
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").on("click",function(){
alert("段落被点击了。");
});
});
</script>
</head>
<body>
<p>点击这个段落。</p>
</body>
</html>Output result:
After clicking the paragraph:
Recommended related video tutorials: jQuery video tutorial
The above is the detailed content of Why use jquery on. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
