Let’s start from the very beginning in jQuery. Somewhere in the beginning there are events and buttons. So, I will start from there, explaining how to Trigger events and what is the difference between trigger and triggerHandler. Trigger triggers the event completely and triggerHandler triggers the event, without loading any part of the browser (or the DOM). This is probably better seen than explained.
Imagine, that you have three buttons – Button 1, Button 2 and Button 3. They are good and nice buttons and as such, each one of them is assigned with “click” functions. Different click functions.
Button 1 is in a form and thus when it is submitted, it goes to the link in the action of the form.
Button 2 is simply triggering a click action for button 1, whenever it is clicked. It also goes to the link, specified.
Button 3 is something else. It is with triggerHandler to Button 1. Thus, it makes a small action in the site – updates the div on the bottom, but it does not go to the link in the form. It avoids it.
And in order to make this article a little more interesting, I have added some links, which behave in a similar way. And yet very different! It seems that if I use the same logic for the links as for the buttons, they simply do not work. Even the second link, which is a trigger to the first link.
Confused? Maybe. But the code really explains it well and feel free to run it until you grasp the idea!
Here comes the code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<html> <head> <title>VitoshAcademy</title> <meta http-equiv="content-type" content = "text/html"; charset=UTF-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script> $(document).ready(function(){ var my_str = ""; $('#button_one').click(function(){ my_str = "A button with ID " + $(this).attr('id') + " was clicked."; $("#my_results").html(my_str); }); $("#button_two").click(function(){ $("#button_one").trigger('click'); }); $("#button_three").click(function(){ $("#button_one").triggerHandler('click'); //window.location = "https://www.vitoshacademy.com"; }); $('#anchor_1').on('click', function(){ my_str = 'The element with ID ' + $(this).attr("id") + ' was clicked.'; $("#my_results").html(my_str); }); $("#anchor_2").on('click', function(){ $('#anchor_1').trigger('click'); }); $("#anchor_3").on('click', function(){ $('#anchor_1').triggerHandler('click'); }); }); </script> <head> <body> <div class="container-fluid"> <h1>The examples</h1><br> <div class="col-*-*"> <form id="my_form" action="https://www.vitoshacademy.com"> <button id="button_one" type="submit">Button 1</button> </form> <hr> <button id="button_two">Button 2</button> <hr> <button id="button_three">Button 3</button> <hr> <a href ="http://www.vit-consulting.com" id="anchor_1" >anchor_1</a> <hr> <a id="anchor_2" >anchor_2</a> <hr> <a id="anchor_3" >anchor_3</a> <hr> <div id="my_results" class="container">Here comes the text!</div> </div> </div> </body> </html> |
That is all, folks! 😀