Display alert box on clicking link


 

Display alert box on clicking link

In this tutorial,html page contains a "a href" link. On clicking this link ,a alert box prompt message "redirecting...." and when we click "Ok" button , it will redirect us to linked page.

In this tutorial,html page contains a "a href" link. On clicking this link ,a alert box prompt message "redirecting...." and when we click "Ok" button , it will redirect us to linked page.

Display alert box on clicking link

In this tutorial, we will display alert box to prompt message using jQuery. In the below program , html page contains a "a href" link. On clicking this link ,a alert box prompt message "redirecting...." and when we click "Ok" button , it will redirect us to linked page. Note here, the redirection is due to link not due to alert box or jQuery.

In this example we have used the jQuery selector to attach the click listener on the hyperlink (a) element. In our example there is a link which is linked to the jQuery website, when user clicks on this link, jQuery intercepts the click event and then displays the alert message to the user.

We have used the JavaScript alert() function to display the message. Here is the code which displays the alert message:

$("a").click(function(event){
alert("Redirecting you to jQuery.com!");

The code $("a").click(function(event) attaches the click listener to the hyperlink element.

So, you can use the selector in jQuery to attach events to any element of the DOM tree. This tutorial shows you to attach the click event to a hyperlink object in HTML page using the jQuery framework.

Here is the video of “How to display alert box in jQuery on link click?”:

Mylink.html

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js">
</script>

<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("Redirecting you to jQuery.com!");
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">
Click here to know about jQuery</a>

</body>
</html>

Description of the program :

$(document).ready(function(){
// Your code here
});

The above code checks whether the page loading is finished and if finished then it executes the code in the block.

The code given below is used to display alert box on clicking link :

$("a").click(function(event){
alert("Redirecting you to jQuery.com!");

OUTPUT :

Download Source Code

Click here to see demo

Check more tutorial of jQuery at

Ads