bind method in jQuery with example

Home » jQuery Methods » bind method in jQuery with example

bind method in jQuery with example

Posted by 20Fingers2Brains on Tags: jQuery Methods

1. bind() method is used to attach an event handler to an element.

2. Handlers are attach to selected element in the jQuery object.

3. We can attach multiple handlers.

4. When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound.

5. After all handlers have executed, the event continues along the normal event propagation path.

Example 1 :

    <html>
    <head>
    <title>bind in jquery</title>
    <style>
    #myDiv
    {
    height:200px;
    width:200px;
    text-align:center;
    background-color:orange;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#myDiv").bind("click", Clickbinding);
        });
        function Clickbinding() {
            alert("Binding done!!");
        }
    </script>
    </head>
    <body>
    <div id="myDiv">Click Me</div>
    </body>
    </html>

Demo :

In the above example, we have used bind() method. We are binding Clickbinding method on click of element with myDiv as ID attribute.
When div is clicked, Clickbinding method is called and alert gets display.

Example 2 :

        <html>
        <head>
        <title>bind in jquery</title>
        <style>
        #myDiv
        {
        height:200px;
        width:200px;
        text-align:center;
        background-color:orange;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#myDiv").bind("mouseenter click mouseleave", function (e) {
                    alert(e.type + " is binded to Div")
                });
            });
        </script>
        </head>
        <body>
        <div id="myDiv">Click Me</div>
        </body>
        </html>

Demo :

In the above example we are binding three events (mouseenter, mouseleave and click) to div using bind() method. The above example shows how to bind multiple events to an element.