Home/ Questions/Q 8908259
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T03:08:00+00:00

Inorder to speed up the app I am trying to use a delegate function

  • 0

Inorder to speed up the app I am trying to use a delegate function instead of the click function… but due to some reasons I am unable to even enter the function….

Any help??

Here is the code:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
            <link rel="stylesheet" href="css/checkbox.css"/>
            <link rel="stylesheet" href="css/jquery.mobile-1.1.1.css" />

        <title>Subscribe</title>
        <script src="scripts/jquery-1.8.2.min.js"></script>
        <script src="scripts/jquery.mobile-1.2.0.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {

**Want to use Delegate instead of Click**
                   $('#selectAllTechAreas').click(function(){
                    //alert('aaa');
                      $('.techAreasCheckBox').attr('checked', true);
                    }); // Tech Areas Select All click function

                    $('#selectAllAssetTypes').tap(function(event){
                            $('.assetTypeCheckBox').attr('checked', true);
                    }); // Asset Types Select All click function
                    $('#clearAllSelections').click(function(){
                        $('.assetTypeCheckBox').attr('checked', false);
                        $('.techAreasCheckBox').attr('checked', false);
                    });
            }); // document
        </script>

    </head>

    <body>

        <div data-role="content" class="contentGrayBg">
            <div id="categoriesTable">
                </table>
                <br>

                <div class="container">
                        <div class="floatLeft">
                                <table id="technologyAreas">
                                    <tr>
                                        <td>
                                            <fieldset id="techAreasCB" data-role="controlgroup">
                                            <legend style="font-style: bold; font-size:16px">Technology Areas:</legend>
                                                <table>
                                                    <tr>
                                                        <td><input type="checkbox" data-mini="true" name="checkbox1" id="checkbox1" class="case techAreasCheckBox" /></td>
                                                        <td style="padding-left: 40px">SAP</td>
                                                    </tr>
                                                    <tr>
                                                        <td><input type="checkbox" data-mini="true" name="checkbox2" id="checkbox2" class="case techAreasCheckBox" /></td>
                                                        <td style="padding-left: 40px">Oracle</td>
                                                    </tr>

                                                    <tr>
                                                        <td><!-- <input type="checkbox" id="selectAllTechAreas"/> --></td>
                                                        <td >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label id="selectAllTechAreas" style="color: orange; padding-left: 10px"><b>Select All</b></label></td>
                                                    </tr>
                                                </table>        
                                            </fieldset>
                                        </td>
                                    </tr>
                                </table>
                        </div>  <!-- Div Class Float Left -->


                </div>
            </div>
        </div> 

    </body>
    </html>

Thanks,
Ankit.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For purposes of generality I am going to assume you want to delegate to the document:

    $(document).on('click','#selectAllTechAreas',function(){
        $('.techAreasCheckBox').attr('checked', true);
        // ...
});

    Generally, the pattern followed is:

    $(document).on('click','#selectAllTechAreas',function(){
-----------    -------  -------------------  -----------
     |            |               |                |
element you     event  selector that specifies  your handler
want to          type    which elements to
delegate to             fire the handler for

    To be clear here, I am not advocating that you delegate your handler to the document, or even to any ancestor, since your target is a single element (particularly since you seem to not be entirely clear on the utility of delegation). I recommend reading this article to get a better handle on the subject.

    To elaborate on the motivation behind delegation, and why it is pointless to delegate the event for a single element, consider the following:

    <ul id="parent-list">
  <li id="post-1">Item 1</li>
  <li id="post-2">Item 2</li>
  <li id="post-3">Item 3</li>
  <li id="post-4">Item 4</li>
  <li id="post-5">Item 5</li>
  <li id="post-6">Item 6</li>
</ul>

    Say I wanted to attach a click event for every list item. I would end up having to attach 6 event handlers like so:

    $('li').click(function(){
    alert('clicked!');
});

    Behind the scenes, jQuery is iterating over each li and attaching that event handler for it. It would be nice if there was a less wasteful way to do this…

    This is where delegation comes in. I can attach just one handler to the ul, which checks whether the target of the event matches the selector li, before firing the event handler:

    $('ul').on("click","li",function(){
    alert('clicked!');
});

    This is more efficient than maintaining 6 separate identical event handlers.

    Now let us look at your case. In your case, you want to attach an event handler to #post-1. The most efficient way to do this is simply to attach an event handler to #post-1 directly, since you aren’t making any savings by attaching to the parent.

    There aren’t 6 separate #post-1 elements you need to attach the handler to, so there is no point in delegating the event.

    • 0