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>，比如：

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

因此，当然这只会影响第一个，因为有两个级别li - a（您ul在另一个级别中有一个元素）。ID您可以为您的第二组元素定义一个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 回答