Introduction:

  • In this article we will explain how to use bind event handlers of html HTML selected elements using jquery or What is bind() method in jquery or why use bind() method in jquery with example.

 

Description:

The jQuery bind() method is used to attaches one or more event handlers function to selected HTML element. This function is executed when the trigger an event on the selected HTML element.

Let’s see simple Example:

  • jQuery bind() with click () events

 

In this example when we click on button elements show the paragraph.

 

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery </title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnshow").bind("click", function () {                                $('#content').show();
            });
        });
    </script>
</head>
<body>
    <button type="button" id="btnshow">Click to Show</button><br />
    <div id="content" style="text-align:justify; margin-top:10px; width:400px; display:none;">
        The Lorem Ipsum Generator (DefaultText) provides an elegant and quick way
        to generate default text or Lorem Ipsumto complement your amazing design.
     </div>    
</body>
</html>

 

OutPut :




In above example when you click on “click to show” button then execute bind method and call click event to show paragraph.

 

  • jQuery bind() with dblclick () events

 

 <script type="text/javascript">
        $(document).ready(function () {
            $("#btnshow").bind("dblclick", function () {
                $('#content').show();
            });
        });
    </script>

 

  • jQuery bind() with mouseenter() events

 

    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnshow").bind("mouseenter", function () {
                $('#content').show();
            });
        });
    </script>

 

 

I hope this article will help to you.

:

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like