Question

我正在尝试使用单页移动网站。基本上我在容器内有listview，列表类有click事件。

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

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

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

});

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

在另一个事件中，我正在提取数据并用新项目替换整个“listview”。

DOM操作成功后，我使用了

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

正如其他线程所建议的那样。

到目前为止，一切顺利，页面刷新新项目，并且CSS应用得很好。

唯一的问题是“listbtn”点击事件在此之后没有触发。

在寻找答案时，我发现this thread并尝试按照建议使用直播，但在更改为实时页面后根本无法加载。加载gif图像永远旋转。

有任何建议或想法吗？

jQuery 2.0 jQM 1.4.2

由于

Answer 1

您需要委派事件以动态添加元素。

另外请注意，您不需要$.mobile.activePage.trigger('create');，.listview("refresh")足以重新增强列表视图。更不用说$.mobile.activePage和.trigger('create')都已弃用，将在jQM 1.5上删除。

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

<强> Demo

jQuery Mobile 1.4.2在DOM操作后单击事件不会触发＆amp;页面刷新

1 个答案: