Updated April 10, 2023
Introduction to jQuery click link
The jQuery click link is used to handle the click event when the click event occurs for the link element. The jQuery click() function and trigger() function we can use to trigger and handle the click on a link event programmatically in the jQuery. The jQuery click() function and trigger() function both are built-in function in jQuery. The jQuery click() function trigger the click event and execute the click() function or the attached function whenever the click event occurs by clicking an element. The jQuery trigger() function trigger the specified and perform the default action of an event for the selected element. So by using these functions we can perform some action every time the link click. The click() function is the short expression of “.on( “click”, handler )” and “.trigger( “click” )” expressions.
Syntax:
1. The syntax of the jQuery click() function.
$("#link").click();2. The syntax of the jQuery trigger() function.
$( "#link" ).trigger( "click" );Parameters:
- click: This is not an optional parameter. It specifies the type of event to trigger for the selected element as here is a link element.
Return Value:
They does not return any value.
Working
- It is used to trigger and handle the click link event.
- Suppose we have a link element(<a> tag) in the HTML page that contains some hyperlinks.
- We need to perform the click event handling on the “a” element on click by using the jquery, so we can use the click() function as “$(“a”).click(function(){ alert( “link clicked event generate.”); });”.
- Now when we click any “a” element in the page the click link event gets generate and displays the alert message “link clicked event generate.”.
Examples of jQuery click link
Given below are the examples mentioned:
Example #1
To handle the click event on link using jQuery click() function.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery click link event </title>
</head>
<body>
<h3> The Example for jQuery click link event : </h3>
<p><a href = "#page" onclick = "clickLink()"> Bookmark link to a page </a></p>
<button type = "button"> Trigger Click Link </button>
<script>
function clickLink(){
alert("Click on the link event is triggered.");
}
$(document).ready(function(){
$( "button" ).click(function(){
$( "a" ).click();
});
});
</script>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, the “button” element is created and it is bind to the click event for the “a” element by using the function click() as “$(“button”).click(function(){ $( “a” ).click();});” which call to the function clickLink() function and display alert message. So, if we click on the link or button the click link event trigger and display alert message, as we can see in the above output.
Example #2
To handle the click event on link using jQuery trigger() function.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery click link event </title>
<style>
a {
display : block;
width : 310px;
padding : 15px;
font-size : 30px;
border : 2px solid green;
}
</style>
<script>
function clickLink(){
$( "#p1" ).text("Click on the link event is triggered by using trigger() function.");
}
$(document).ready(function() {
$( "button" ).click(function(){
$( "a" ).trigger( "click" );
});
});
</script>
</head>
<body>
<h3> This an example of jQuery click link event : </h3>
<div>
<a onclick = "clickLink()" > This is a simple link which trigger by using the trigger() function. </a>
<button type = "button"> Trigger Click Link </button>
</div>
<p id = "p1"> </p>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, the “button” element is created and it is bind to the click event for the “a” element by using the function trigger() as “$( “button” ).click(function(){$( “a” ).trigger( “click” );});” which call to the function clickLink() function and display alert message. So, if we click on the link or the button the click link event trigger and display the alert message, as we can see in the above output.
Example #3
To handle the click event on link and display its “href” attribute value using jQuery click() function.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery click link event </title>
<script>
function clickLink(){
$link = $('a');
alert("The herf attribute value of the link is : " +$link.attr('href'));
}
$(document).ready(function(){
$( "button" ).click(function(){
$( "a" ).click();
});
});
</script>
</head>
<body>
<h3> This an example of jQuery click link event : </h3>
<a onclick = "clickLink()" href = "https://www.educba.com/software-development/software-development-tutorials/jquery-tutorial/"> This jQuery tutorial link. </a>
<br>
<button type = "button"> Trigger Click Link </button>
<p id = "p1"> </p>
</body>
</html>Output:
Once we click on the heading, the output is:
In the above code, the “button” element is created and it is bind to the click event for the “a” element by using the function click(), which call the function clickLink() function and display the “href” attribute value of that link element in the alert message as “$link.attr(‘href’);”. So, if we click on the link or the button the click link event trigger and display the “href” attribute value in the alert message, as we can see in the above output.
Conclusion
The jQuery click link event trigger and handle by using the click() and trigger() function, it is used to handle the click event when the click event occurs for the link element.
Recommended Articles
This is a guide to jQuery click link. Here we discuss the introduction, working of jQuery click link event and examples respectively. You may also have a look at the following articles to learn more –
