Question

我们有这个嵌套列表：

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

id =“AllTopics”的第一个<ul>位于html documnet本身，

内部<li><ul><li>...从Ajax调用加载，如：

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

我可以从第一个新生的<li>获得该活动，例如：

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

但内部<li>或<a>似乎没有引发事件： - （

Ani想法？

提前感谢

Answer 1

问题是新内容是使用Ajax调用加载的，而您之前只是设置了事件，因此新元素将不会有它们。

尝试使用delegate 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>

所以，OF COURSE只影响第一个，因为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!'); });

Ajax加载嵌套列表无法从内部获取事件

1 个答案: