Home > Article > Web Front-end > Detailed graphic explanation of three methods of jQuery button click event

Detailed graphic explanation of three methods of jQuery button click event

yuliaOriginal: 2018-10-12 10:25:369059browse

jQuery is a framework based on JavaScript. It is widely used because of its simplicity and convenience. Do you know how to set the click event of the jQuery button? This article will tell you about the method of jQuery click triggering event. It has certain reference value. Interested friends can refer to it.

The previous article told you how to handle button click events in JavaScript. If you need it, you can take a look. Next, we will directly explain the jQuery button click event.

Note: When using jQuery, you must first introduce the jQuery file

Method 1. $ ("button").click(function () { })

A click event occurs when an element is clicked. The click() method can trigger a click event, which stipulates that the function will be run when a click event occurs.

Syntax: $(selector).click(function)

Example: When the button is clicked, the click event is triggered and the dialog box pops up a piece of content.

The code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <button>click</button>
 </body>
 <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
     alert("祝你好运");
    });
  });
 </script>
</html>

Rendering:

##Method 2. $("button ").on("click",function () { })

on() method can add one or more events to the selected element and sub-element. If you need to delete the event, you can use off() method.

Syntax: $(selector).on(event,childSelector,data,function)

The code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <button>点我</button>
 </body>
 <script type="text/javascript">
  $(document).ready(function(){
    $("button").on("click",function(){
      alert("have a nice day ");
    });
  });
 </script>
</html>

Method 3, $("button" ).bind("click",function(){ })

bind() method can add one or more events to the selected element, and the function will be run when the event occurs.

Syntax: $(selector).bind(event,data,function,map)

The code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <button>按钮</button>
 </body>
 <script type="text/javascript">
  $(document).ready(function(){
    $("button").bind("click",function(){
      alert("阳光总在风雨后");
    });
  });
 </script>
</html>

The above introduces three types of button click events in jQuery Methods vary. As for which method to choose, it also depends on work needs and personal habits. Beginners can try it themselves. I hope this article can help you!

For more related tutorials, please visit

jQuery Video Tutorial

The above is the detailed content of Detailed graphic explanation of three methods of jQuery button click event. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery Event map JS function 事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the difference between post request and get request in Ajax?Next article：What is the difference between post request and get request in Ajax?

See more

Detailed graphic explanation of three methods of jQuery button click event

Related articles