Question

我的网页遇到了一些问题。

我有一个pageshow事件，我在其中发出ajax调用以从我的服务器返回一些事件。之后，我使用它们填充列表，并使用以下内容为所有事件创建一个页面：

$("#modifyEvent").after('<div data-role="page" id="modifyEvent'+i+'"" data-theme="a">'+
bla bla bla...
);

每个事件都得到了很好的认可，我可以导航到它并在新页面中查看所有数据。但是，我内部有一些按钮，每个按钮都有一个类关联，例如：class =＆＃34; buttonDelete＆＃34;。

另外，我有一个pagecreate事件，我想在其中添加与该按钮相关的所有功能：

$(document).on("pagecreate", '#event', function() {
    $('.buttonDelete').click(function() {

我尝试使用类和id但是从不调用此函数。在这种情况下调用函数事件的正确方法是什么？

Answer 1

问题是您在不删除旧页面的情况下注入相同的页面。 pagecreate在导航到动态页面时触发，但是，您的事件侦听器附加到DOM中找到的第一个元素。

/* will fire on each page one time */
$(document).on("pagecreate", "#p1", function () {
   $(".button").on("click", clickHandler);
});

<!-- dynamically inject pages - both in DOM -->
<div data-role="page" id="p1">
  <a class="button">Button</a> <!-- this one will always receive the binding -->
</div>

<div data-role="page" id="p1">
  <a class="button">Button</a> <!-- not this one -->
</div>

您的解决方案是在创建新页面之前删除动态注入的页面。最简单的方法是在隐藏后删除页面。只需添加自定义类，例如dynamic并删除pagecontainerhide上该类的所有网页。

$(document).on("pagecontainerhide", function (e, data) {
   if ( data.prevPage.hasClass("dynamic") ) {
      data.prevPage.remove();
   }
});

data.prevPage是刚隐藏的页面。

更新：.hasClass("class")比.is(".class")快。

在JQM中动态创建的页面无法触发pagecreated函数

1 个答案: