jQuery Trigger Custom Events Example

jQuery Trigger Custom Events Example

Today, We want to share with you jQuery Trigger Custom Events Example.
In this post we will show you Trigger Custom Events with jQuery Examples, hear for jquery trigger custom event Example we will give you demo and example for implement.
In this post, we will learn about JQuery trigger() Method with an example.

A string containing a JavaScript or jquery event type, such as click event or submit event. Execute all handlers element event and behaviors attached same as a event to the matched all the elements for the given each event type.

Difference between jQuery Document Ready Method and jQuery load Method

executes when HTML elemnts or HTML-Document is loaded and DOM is all ready

$(document).ready(function() {
 alert("here script is to  call : document is ready");
});

Binding Event Handlers to Multiple Events

simple load event executes all the event when complete all the page is fully loaded,and so here all script including all frames(iframe), objects and images,etc.

$(window).load(function() {
 alert("here script is to  call : window is loaded");
});

Run JavaScript Only After Entire Page Has Loaded Example 1

$(window).bind("load", function() {
   // code here
   //Trigger Custom Events with jQuery
});

or 

$("#some-element").click(function(event) {
    doSomethingKickAss(event);
});

Binding Event Handlers to Multiple Events

$("#id-element-name").bind({
    "mouseenter": function(/* simple jQuery.Event fire  */ event) {
        // code here
    },
    "mouseleave": function(/* simple jQuery.Event fire  */ event) {
        // code here
    },
    "click": function(/* simple jQuery.Event fire */ event) {
        // code here
    }
});

// Set up a click event
jQuery('.tabs a').on('click', function() {
	 // code here	
});

// Trigger a click on the last one
jQuery('.tabs a').last().trigger('click');

// Listen to all clicks in the body
jQuery('body').on('click', 'a', function() {

	if(conditionMet) {
		 // code here
	}
});

Run JavaScript Only After Entire Page Has Loaded

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
	<h2>Run JavaScript Only After Entire Page Has Loaded</h2>
    <iframe src="https://www.pakainfo.com"></iframe>
</body>
</html>

Trigger onclick event of an anchor tag on document onload jquery function

<!DOCTYPE html>
<html>
<head>
<title>Trigger onclick event of an anchor tag on document onload</title>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'>
$(window).load(function(){<!--from w  w  w.l i v e 2 4. c o m-->
    $(document).ready(function(){
        $('#my_demo_example').click(function() {
            console.log('Welcome to Pakainfo.com!!!'); 
        });
        $('#my_demo_example').trigger('click');
    });
});
</script>
</head>
<body>
	<h1>Trigger onclick event of an anchor tag on document onload</h1>
  <a href="#" id="my_demo_example" alt="Trigger onclick " title="Trigger onclick ">click here to click event trigger</a>
</body>
</html>

Example


Related FAQ

Here are some more FAQ related to this Article:

  1.   PHP Laravel 5.6 Dynamically Add Active class
  2.   insert delete image from folder in php with jQuery
  3.   Get Selected Radio Button value using jQuery
  4.   Laravel Dropzonejs Multiple File Upload using jQuery
  5.   Laravel 6 Set Active Navigation Menu Example
  6.   jQuery Ajax POST example with Laravel 5.7
  7.   PHP Autocomplete search with typeahead.js
  8.   Send PHP variable to bootstrap modal popup via Ajax
  9.   How to Add header and footer in PDF page using DOMPDF?
  10.   Multiple File Upload in laravel 7 Example Tutorial