jQuery with ASP.NET examples : Events Sample

Use this links to see bind and unbind event.

Bind Events

Unbind Events

Here on document ready all div boxes with class name "divSample" get bound with few mouse event.

As shown in below code the method bindEvents(), will bind mouseover and mouseout events

On mouse over function addClass is being called which will add class name "divChanged" to the related div box.

And on mouse out function removeClass is being called which will remove class "removeClass" from related div.

There is one more method unBindEvents, which removes event assigned to boxes.

Code:

        $(document).ready(function()
        {
           bindEvents();
        });
            
        function bindEvents()
        {
            $(".divSample").each(function()
            {
                $(this).bind("mouseover",addClass);
                $(this).bind("mouseout",removeClass);
            });
        }

        function unBindEvents()
        {
            $(".divSample").each(function()
            {
                $(this).unbind("mouseover",addClass);
                $(this).unbind("mouseout",removeClass);
            });
        }

        function addClass()
        {
            $(this).addClass("divChanged");
        }

        function removeClass()
        {
            $(this).removeClass("divChanged");
        }

For more information:

<< Back to article