0

このネストされたリストがあります：

   <ul id="AllTopics" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search topic...">
            <li><a href="#">Polite Phrases</a><span class="ui-li-count">101</span>
              <ul data-role="listview" data-inset="true" >
                <li ><a href="#Main" data-parm="Polite Phrases">Polite Phrases</a><span class="ui-li-count">101</span></li>
                <li ><a href="#Main" data-parm="Polite Phrases">At The End Of A Letter/Email</a><span class="ui-li-count">101</span></li>
             </ul>
           </li>
   </ul>

最初<ul>の id="AllTopics" は、html ドキュメント自体にあります。

内部<li><ul><li>...は、次のような Ajax 呼び出しからロードされます。

on('pageinit'... event
             ...   $("ul").append(...

<li>次のように、最初の newborn からイベントを取得できます。

$('#AllTopics').on('click','li',function (event){...

しかし、内部<li>または<a>イベントを発生させないようです:-(

アニのアイデア？

前もって感謝します

4

1 に答える 1

0

問題は、新しいコンテンツが Ajax 呼び出しを使用してロードされ、前にイベントをセットアップしただけなので、新しい要素にそれらが含まれないことです。

デリゲートJQuery 関数を使用してみてください。

$('#AllTopics').delegate('li a','click',function(){
   alert('How you dare to click on my links?!');
});

編集

他の解決策は、Ajax 呼び出しを介して要素が追加されたら、イベントを割り当てることです。

// This is an example, retrieve the data on your own form
$.get('mypage.php',function(data){
   // Add content to your DOM elements
   $('#AllTopics').append(data);

   // Assign events
   $('#AllTopics').on('click','li',function (event){
      alert('Holy moly, you keep clicking on my links!');
   });
});

注: HTML 要素の構成が次のようになっていることに気付きました。

<ul>
   <li>
      <a/>
   </li>
   <span/>
   <ul>
      <li>
         </a>
      </li>
   </ul>
</ul>

もちろん、2つのレベルがあるため、最初のレベルにのみ影響しli - aます（ul別のレベルの中に要素があります）。要素IDの 2 番目のグループに対して を定義して、イベントを正常にトリガーするか、次のように実行し続けることができます。li - a

$('#AllTopics').delegate('li a','click',function(){
   alert('How you dare to click on the first link?!');
});

$('#AllTopics').delegate('ul li a','click',function(){
   alert('Stop clicking my children links!');
});
于 2013-05-30T12:42:57.610 に答える