-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、イベントのターゲットがセレクターと一致するかどうかをチェックするハンドラーをに1つだけアタッチできます。li

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

これは、6つの別個の同一のイベントハンドラーを維持するよりも効率的です。

それでは、あなたのケースを見てみましょう。あなたの場合、イベントハンドラーをにアタッチする必要があります#post-1。これを行う最も効率的な方法は#post-1、親にアタッチすることで節約することはないため、イベントハンドラーを直接アタッチすることです。

#post-1ハンドラーをアタッチする必要のある6つの個別の要素はないため、イベントを委任しても意味がありません。

于 2012-11-28T07:00:44.180 に答える