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

Read Also:  load external HTML File with jQuery

$(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