jQuery Mobile 1.4.2点击DOM操作后不发生的事件页面刷新 [英] jQuery Mobile 1.4.2 Click Event Not Firing After DOM Manipulation & Page Refresh

问题描述

我正在尝试使用单页移动网站。基本上我有一个listview里面的容器和单击事件列表类。

 < div role =mainclass =ui -content> 
< ul data-role =listviewdata-inset =true> 
< li class =listbtn> 
< a href =url>< / a> 
< / li> 
< / ul><！ -  / listview  - > 
< / div><！ -  / content  - > 
  

我有一个脚本用于触发listbtn点击事件

  $（。listbrn）。click（function（）{
 
}）; 
  

首次加载页面时，此功能正常

$ b $在另一个事件中，我正在拉取数据并用新的项目替换整个listview。

在DOM操作成功后，我使用了

  $（'。ui-page-active .ui-listview'）。listview（'refresh'）; 
 $ .mobile.activePage.trigger（'create'）; 
  

如其他线程所建议的。

到目前为止，一切顺利，页面刷新与新项目和CSS应用很好地按预期。

只有问题是listbtn点击事件不是在此之后触发。 / p>

在寻找答案时，我发现这个线程，并尝试使用直播建议，但在更改到实际页面将不会加载。加载gif图像永远旋转。

任何建议或想法？

jQuery 2.0
jQM 1.4。 2

谢谢

解决方案

您需要 / em>事件到动态添加的元素。

另一个注意事项，你不需要 $。mobile.activePage.trigger（'create'） ; ， .listview（refresh）足以重新增强列表视图。更不用说， $。mobile.activePage 以及 .trigger（'create'）已被弃用，在jQM 1.5上删除。

  $（document）.on（click，.listbtn，function（） 
 / * code * / 
}）; 
  

演示

I am trying to use single page mobile site. Basically I have a listview inside container and click event for list class.

<div role="main" class="ui-content">
  <ul data-role="listview" data-inset="true">
    <li class="listbtn">
      <a href="url"></a>
    </li>
  </ul><!-- /listview -->
</div><!-- /content -->

I have a script for firing "listbtn" click event

$(".listbrn").click(function(){

});

this is working fine when page loads for first time

On another event, I am pulling data and replacing the whole "listview" with new items.

After DOM manipulation is successful, I have used

$('.ui-page-active .ui-listview').listview('refresh');
$.mobile.activePage.trigger('create');

as suggested on other threads.

Up to this point everything is smooth, page refreshes with new items and CSS applied nicely as expected.

Only problem is "listbtn" click event is not firing after that.

While looking for answers, I found this thread and tried to use live as suggested but after changing to live page won't load at all. Loading gif images spins forever.

Any suggestion or ideas?

jQuery 2.0 jQM 1.4.2

Thanks

解决方案

You need to delegate event to dynamically added elements.

Another note, you don't need $.mobile.activePage.trigger('create');, .listview("refresh") is enough to re-enhance list-view. Not to mention that both $.mobile.activePage as well as .trigger('create') are deprecated and will be removed on jQM 1.5.

$(document).on("click", ".listbtn", function () {
  /* code */
});

Demo

这篇关于jQuery Mobile 1.4.2点击DOM操作后不发生的事件页面刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！