1

ここでちょっとした壁にぶち当たりました。私の現在のプロジェクトの以前の開発者は、1 つの巨大な JS ファイルを使用して、このアプリの正面部分全体を構築することに決めました。ページ構造にはほとんど html を使用しませんでした。したがって、基本的にアプリのコンテンツと構造はすべて動的に生成されます。

私はこの 18k 行以上の JS ファイルを扱うことを学びましたが、ついにちょっとした障害にぶつかりました。className を持つ他の要素の配列の中から特定の要素を見つける必要があり、その要素で.grid_elmクリック イベントをトリガーする必要があります。

現在の HTML:

<div id="grid">
   <div id="gridMask">
      <div id="mCSB_1"> /*Auto-Generated by a Scrollbar Plugin*/
         <div class="mCSB_conatiner"> /*Auto-Generated by a Scrollbar Plugin*/
            <div class="holder">
               <div class="grid_elm"></div>
               <div class="grid_elm"></div>
               <div class="grid_elm"></div>
               <div class="grid_elm"></div>
            </div>
         </div>
      </div>
   </div>
</div>

問題：

#gridユーザーが自動提案検索ボックスからオプションを選択するたびに、新しい要素で更新されます。次に、各要素をループして、その.grid_elm子要素に基づいて特定の要素を見つけ、その特定の要素をクリックする.grid_elm必要がありますが、イベントを伝播する特定の要素がないため、これを行う方法がわかりません. 各要素をカスタムイベントにサブスクライブ.grid_elmしてから、要素が追加されたときにカスタムイベントをトリガーする#gridことはできません.grid_elm.に対して。私がこれを行う場合：

$("#grid").on("click",'.grid_elm",function(){
   $(".grid_elm").each(function(){
      console.log($(this));
   })
})

イベントは特定の要素から発生するため、要素のリストを取得できますが、カスタム イベントが発生したときに各要素をループしようとしても、何も得られません。

$("#grid").on("custom",".grid_elm",function(){
   $.each($(".grid_elm"),function(){
      console.log($(this));
   })
})

//"custom" Event is fired after grid refreshes with new content
$(".grid_elm").trigger("custom");

サブスクライブして#grid、参照なしでイベントを直接発生させ.grid_elm、その子をループしようとしても、何も得られません。カスタム イベントの処理について、かなり初歩的なことが欠けているように感じます。

4

1 に答える 1

2

これは、このjsfiddleでうまくいくようです:

http://jsfiddle.net/KEMrX/ 次の JavaScript があります。

$("#grid").on("custom",".grid_elm",function(){
   $.each($(".grid_elm"),function(){
      console.log($(this));
   })
})

//"custom" Event is fired after grid refreshes with new content
$(".grid_elm").trigger("custom");

および HTML コード:

<div id="grid">
   <div id="gridMask">
      <div id="mCSB_1"> 
         <div class="mCSB_conatiner"> 
            <div class="holder">
               <div class="grid_elm"></div>
               <div class="grid_elm"></div>
               <div class="grid_elm"></div>
               <div class="grid_elm"></div>
            </div>
         </div>
      </div>
   </div>
</div>

実行後にコンソールを見ると、.grid_elm 要素が適切に出力されていることがわかります。

ほとんどの場合、カスタム イベント処理ではなく、生成されたコンテンツに問題があります。#grid 要素はいつ作成されますか? #grid 要素にイベントを追加するコードはいつ実行しますか?

編集: 重要な部分: イベントをアタッチするコードは、ページに #grid 要素を作成 (および追加) するコードの直後に発生する必要があります。それ以外の場合、式 $("#grid") は空の配列を返し、.on() 関数は何も実行されません。

于 2013-06-30T02:03:37.827 に答える