-1

为了加快应用程序的速度，我尝试使用委托功能而不是点击功能......但由于某些原因，我什至无法进入该功能......

有什么帮助吗？？

这是代码：

    <!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>

谢谢，安基特。

4

1 回答 1

3

出于一般性目的，我假设您要委托给文档：

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

一般来说，遵循的模式是：

$(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

在这里要明确一点，我不主张您将处理程序委托给文档，甚至委托给任何祖先，因为您的目标是单个元素（特别是因为您似乎并不完全清楚委托的效用）。我建议阅读这篇文章以更好地处理该主题。

要详细说明委托背后的动机，以及为什么将事件委托给单个元素毫无意义，请考虑以下几点：

<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>

假设我想为每个列表项附加一个点击事件。我最终不得不像这样附加 6 个事件处理程序：

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

在幕后，jQuery 遍历每一个li并为其附加事件处理程序。如果有一种不那么浪费的方法来做到这一点，那就太好了......

这就是委托的用武之地。我可以只将一个处理程序附加到，它会在触发事件处理程序之前ul检查事件的目标是否与选择器匹配：li

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

这比维护 6 个独立的相同事件处理程序更有效。

现在让我们看看你的情况。在您的情况下，您希望将事件处理程序附加到#post-1. 最有效的方法是直接附加一个事件处理程序#post-1，因为附加到父级并没有节省任何费用。

您不需要将处理程序附加到6 个单独#post-1的元素，因此委派事件没有意义。

于 2012-11-28T07:00:44.180 回答