Updated April 18, 2023
Introduction to jQuery click href
In jQuery, the click href is defined as by clicking the link it will direct to the content in which that link contains and when this link is clicked the click event takes place and this is done by triggering the click function which is an in-built function in jQuery. Therefore in general, we can say that whenever a link is included using href tag in the program is considered to be linked to direct it to other content or page and this can be done using the click() method in jQuery which will be triggered on clicking the link provided.
Syntax:
$(selector).click(function_name);
<a href = "the link which you want to redirect when clicked"> link_name </a>In the above syntax, the selector can be any element in the program and most of the time it is the “button” element that is selected for this click() method and the parameter which is passed to this method will be the function name in which it contains the logic to be executed when the selector is clicked by using this click() method. Then we use the “<a href> tag in which we include the link of the page we want the user to redirect when this link is clicked and we can also give this link a name in short instead of writing the entire link. This Syntax returns the page content when the link is clicked by triggering the click() method.
How does click href work in jQuery?
How click href works in jQuery with examples:
In this section, we will discuss how the click() method is used with href for using links in the web pages to easily redirect to the page specified in the given link and this link gets redirected by clicking on it. Therefore, we use the click() method which will be triggered when the link specified in the page is clicked which means the click event is generated by applying this click method on particular selector and function which will be executed when the click event occurs which is passed as a parameter to the click() method and then within the function attr() method is used to pass on the link that needs to be clicked and redirected when clicked by applying it on the id which is defined in the href tag where we mention the specified link that user will be visited when this link will be clicked.
Example #1
<!DOCTYPE html>
<html>
<head>
<title> A jQuery click href </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$("click_href").attr("href", "https://en.wikipedia.org/wiki/Flower");
});
});
</script>
</head>
<body>
<h1> Demonstration for jQuery click href </h1>
<p><a href="https://en.wikipedia.org/wiki/Flower" id="click_href">Details on Flowers </a></p>
<p>Mouse over the link (or click on it) to see that the value of the href attribute which is specified. By clicking this link you will get the details about flowers. </p>
</body>
</html>Output:
In the above example, we can see we have used documents. ready() method to make the document available which means that is ready for the accepting functions to run within it. Therefore first we are using the click() method on the paragraph selector wherein the body tag we have defined paragraph tag within which we are again defining the <a href > tag to mention the link that needs to be clicked. Then this selector which is passed to the click() method will execute the paragraph tag and the function passed to this method is the id which is defined in <a href> tag which holds the link is selected to the attr() method where we are passing the link as href along with the link that needs to be executed when the “Details on Flowers is clicked on the page which can be seen in the first screenshot then when the link is redirected it will display the page that is executed when the link is clicked and is seen in the second screenshot.
Example #2
Now let us consider another example where the dialogue box will appear that shows the click event is triggered.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Click on a href Link</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function dialogue_box(){
alert("Click method that triggers click event on the link.");
}
$(document).ready(function(){
$("button").click(function(){
$("a")[0].click();
});
});
</script>
</head>
<body>
<p><a href="https://en.wikipedia.org/wiki/Flower" onclick="dialogue_box()">Details on Flowers</a></p>
<button type="button">Trigger Click evet</button>
</body>
</html>Output:
In the above example, we can see first we are defining a function “dialogue_box()” in which we are trying to display a dialogue box that will alert a message saying the click method is triggered and the click event occurs when we click “ok” in the dialogue box and this alert message is defined within the alert() function and is inside the dialogue_box() function then here instead of using click we will be using onclick()method which is similar to click() method. In this example we will first define the paragraph tag in which we are declaring the <a href > tag which is used for specifying the link to be displayed on the web page, then we use onclick property for making the click even occur when this specified link is clicked within this property we are defining the dialogue_box() function to execute when this click event occurs and before using this < a href> tag we have seen we have made the document ready for including the tags and theirs events to occur. We have also declared the click() method here using the button as selector where we can see in the screenshot with button name as “Trigger click event” which when clicked will also make the click event occur whenever this button is clicked and displays the dialogue box and when we click “ok” then it will direct the user to the link specified in the href link. The output for the above example is as shown in the screenshot.
Conclusion
In this article, we conclude that jQuery provides a click() method which can be used for providing the <a href> tag for specifying the link the user wants to direct to when this specified link is clicked. In this article, we can also use onclick property with href links for using the links to be provided on the web page. Therefore in jQuery, the only way to provide links also in the web page is done along with the click() method.
Recommended Articles
This is a guide to jQuery click href. Here we discuss the Introduction, syntax, How click href works in jQuery? and examples respectively. You may also have a look at the following articles to learn more –
