jQuery trigger click Example (Trigger method binded to Click event)
Let’s assume that you have set of elements in a web page, specifically form elements. Do you know how to trigger click of an element without actually clicking it? Have you ever wondered how you can bind the “click” event of an element to itself and to other multiple elements on the same page? In this article, I am going to share with you a very simple yet powerful way to use jQuery to trigger click event using an example. Read on to find out more.
Example to Trigger Click by binding method to Click event using jQuery
Let’s assume that we have two buttons in our web page. The first button is called “Click 1” & the second button is called “Click 2”. So let me show you, how to use the trigger method first. So here is the full source code for a basic trigger method:
<html>
<head>
<title>jQuery example for using trigger method binded to click event</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<input type="submit" name="sbt_click1" id="sbt_click1" value="Click 1">
<input type="submit" name="sbt_click2" id="sbt_click2" value="Click 2">
<script type="text/javascript">
$('#sbt_click1').click(function() {
alert( 'You clicked button: '+ $(this).val() );
});
</script>
</body>
</html>Simple so far? Just run the above code and click on the “Click 1” button. You will see the alert “You clicked button: Click 1”.
Now to the most interesting part. So what essentially we would like to do next is to click on the “Click 2” button & yet, show the same alert as we have shown for the “Click 1” button. Yes, of course, we can copy and paste the same code in the trigger method for “Click 2” button. But that’s just mere copy and paste. That doesn’t teach us how to actually use the trigger method and click events as effectively as they are meant to be. Do they?
So what do we do now? Well, it’s simple. We will just go ahead and write a single line code in the “click” event of the “Click 2” button so that it “triggers” the “click” event of the “Click 1” button automatically, without requiring us to copy & paste any part of the code that we have written for “Click 1” button. Makes sense? Take a look at the source code and you will possibly understand it, if you haven’t so far. Here is the full source code to bind trigger method to click event in jQuery:
<html>
<head>
<title>jQuery trigger click example</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<input type="submit" name="sbt_click1" id="sbt_click1" value="Click 1">
<input type="submit" name="sbt_click2" id="sbt_click2" value="Click 2">
<script type="text/javascript">
$('#sbt_click1').click(function() {
alert( 'You clicked button: '+ $(this).val() );
});
//This is where the "magic" happens
$('#sbt_click2').click(function() {
$("#sbt_click1").trigger('click');
});
</script>
</body>
</html>So if you take a look at the code of the “Click 2” button, you will notice that we haven’t written any alerts in it. We haven’t copied any code from the click event of the “Click 1” button. Instead, we simply binded trigger method to the click event of the “Click 1” button. Makes sense now? Hope it does.
This is a very simple example for jQuery trigger click. You can apply the same strategy to achieve different effects.
Simple, isn’t it?
Do you know of any other ways to trigger click of a button using jQuery? Feel free to suggest by commenting below.
very good man, thanks
June 25, 2018 at 6:02 pm