jQuery Delegate Function Example

Let's have a closer look at the jQuery .delegate() function.

Demo Code Download

Description

The .delegate() function also provides a way of attaching event handlers to new elements, like was saw in the .live() function demo. You may find that .delegate() is faster than .live() because the latter searches the entire document namespace for the elements as opposed to a single document context. Also, you can specify a jQuery selector to match mutiple events based on a specified set of root elements. Lets have a look at an example of the delegate jQuery function in action. Further Reading »

Demo

jQuery Function Demo - jQuery4u.com

Demo: Delegating events to child elements of a root element.

The demo area is the root element (orange border) with coloured span child elements which have a hover event attached.

Run Demo View Code


Download

The download package includes all the inline HTML, CSS, JavaScript, jQuery and images required for the .delegate() function demo so you can try it yourself and change as you please.

The full code listing for all jQuery functions have been now added to GitHub, you can get them there, we are making them work with the latest versions of jQuery!

Code

<!-- Copyright 2011 jQuery4u.com -->
<!DOCTYPE html>
<html>
<title>jQuery Function Demo - jQuery4u.com</title>
<head>
    <script src="http://www.jquery4u.com/function-demos/js/jquery-1.6.4.min.js"></script>
    <script src="http://www.jquery4u.com/scripts/function-demos-script.js"></script>

    <script type="text/javascript">

    var JQFUNCS =
    {
        runFunc:
        {
            /* ------------------------------ delegate Demo ------------------------------ */
            "delegate":
            {
                run: function(id)
                {
                    $('#'+id).css({"display":"inline-block"});
                    var frequency = .3;
                    for (var i = 0; i < 32; ++i)
                    {
                        var frequency = .3;
                        for (var i = 0; i < 45; ++i)
                        {
                         r   = Math.sin(frequency*i + 0) * 127 + 128;
                         g = Math.sin(frequency*i + 2) * 127 + 128;
                         b  = Math.sin(frequency*i + 4) * 127 + 128;
                         $('#'+id).append('<span class="smallcolor" style="background-color:'+JQFUNCS.RGB2Color(r,g,b)+';"></span>');
                        }
                    }

                    $('#'+id).delegate('span', 'hover', function(e)
                    {
                        $(this).toggleClass("whitebg");
                    })
                },

                reset: function(id)
                {
                    $('#'+id).empty().hide();
                }


            }
        },

        RGB2Color: function(r,g,b)
        {
          return '#' + this.byte2Hex(r) + this.byte2Hex(g) + this.byte2Hex(b);
        },

        byte2Hex: function(n)
        {
          var nybHexString = "0123456789ABCDEF";
          return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
        }
    }

    </script>

    <style type="text/css" media="screen">
        .whitebg {background-color: white !important; width:30px!important;}
        .smallcolor { float:left;width:10px;height:30px; }
    </style>

</head>
<body>

<p class="example">Demo: Delegating events to child elements of a root element.</p>
<p>The demo area is the root element (orange border) with coloured span child elements which have a hover event attached.</p>
<p><a href="#" id="delegate-demobtn" class="demobtn btn actionr">Run Demo</a> <a href="#" id="delegate-codebtn" class="codebtn btn actionr">View Code</a> <a href="#" id="delegate-resetbtn" class="resetbtn btn actionr" style="display: none;">Reset</a></p>
<div class="demoarea" id="delegate" style="border:1px solid orange;padding:20px;"></div>

</body>
</html>
<!-- Copyright 2011 jQuery4u.com -->