106 lines
2.9 KiB
Markdown
106 lines
2.9 KiB
Markdown
|
---
|
||
|
|
title: Click Method
|
||
|
|
---
|
||
|
|
|
||
|
|
# Click Method
|
||
|
|
|
||
|
|
|
||
|
|
The jQuery Click method triggers an function when an element is clicked. The function is known as a "handler" becuase it handles the click event. Functions can
|
||
|
|
impact the HTML element that is bound to the click using the jQuery Click method, or they can change something else entirely. The most-used form is:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
$("#clickMe").click(handler)
|
||
|
|
```
|
||
|
|
|
||
|
|
The click method takes the handler function as an argument and executes it every time the element `#clickMe` is clicked. The handler function receives a
|
||
|
|
parameter known as an [eventObject](http://api.jquery.com/Types/#Event) that can be useful for controlling the action.
|
||
|
|
|
||
|
|
#### Examples
|
||
|
|
This code shows an alert when a user clicks a button:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<button id="alert">Click Here</button>
|
||
|
|
```
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
$("#alert").click(function () {
|
||
|
|
alert("Hi! I'm an alert");
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
[jsFiddle](https://jsfiddle.net/pL63cL6m/)
|
||
|
|
|
||
|
|
The [eventObject](http://api.jquery.com/Types/#Event) has some built in methods, including `preventDefault()`, which does exactly what it says - stops
|
||
|
|
the default event of an element. Here we pevent the anchor tag from acting as a link:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<a id="myLink" href="www.google.com">Link to Google</a>
|
||
|
|
```
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
$("#myLink").click(function (event) {
|
||
|
|
event.preventDefault();
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
<a href='https://jsfiddle.net/dy457gbh/' target='_blank' rel='nofollow'>jsFiddle</a>
|
||
|
|
|
||
|
|
#### More ways to play with the click method
|
||
|
|
|
||
|
|
The handler function can also accept additional data in the form of an object:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
jqueryElement.click(usefulInfo, handler)
|
||
|
|
```
|
||
|
|
|
||
|
|
The data can be of any type.
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
$("element").click({firstWord: "Hello", secondWord: "World"}, function(event){
|
||
|
|
alert(event.data.firstWord);
|
||
|
|
alert(event.data.secondWord);
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
Invoking the click method without a handler function triggers a click event:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
$("#alert").click(function () {
|
||
|
|
alert("Hi! I'm an alert");
|
||
|
|
});
|
||
|
|
|
||
|
|
$("#alert").click();
|
||
|
|
```
|
||
|
|
|
||
|
|
Now, whenever the page loads, the click event will be triggered when we enter or reload the page, and show the assigned alert.
|
||
|
|
|
||
|
|
Also you should prefer to use .on('click',...) over .click(...) because the former can use less memory and work for dynamically added elements.
|
||
|
|
|
||
|
|
<a href='https://jsfiddle.net/gspk6gxt/' target='_blank' rel='nofollow'>jsFiddle</a>
|
||
|
|
|
||
|
|
#### Common Mistakes
|
||
|
|
|
||
|
|
The click event is only bound to elements currently on the DOM at the time of binding, so any elements added afterwards will not be bound. To bind all
|
||
|
|
elements on the DOM, even if they will be created at a later time, use the `.on()` method.
|
||
|
|
|
||
|
|
For example, this click method example:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
$( "element" ).click(function() {
|
||
|
|
alert("I've been clicked!");
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
Can be changed to this on method example:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
$( document ).on("click", "element", function() {
|
||
|
|
alert("I've been clicked!");
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
#### More Information:
|
||
|
|
|
||
|
|
For more information, please visit the [official website](https://api.jquery.com/click/#click).
|
||
|
|
|