JQM - 来自多个页面的按钮点击答案

【问题标题】：JQM - Button clicks from multiple pagesJQM - 来自多个页面的按钮点击
【发布时间】：2012-10-31 08:38:34
【问题描述】：

我有一个 jQuery Mobile 应用程序，它通过 ajax 加载页面，例如 page1.html、page2.html 等

在 page1.html 我有一个按钮：

<a href="page2.html" data-role="button" class="submit">Submit</a>

在 page2.html 我也有一个按钮

 <a href="page3.html" data-role="button" class="submit">Submit</a>

我在正文中的每个页面上都引用了一个脚本文件（script.js），其中包含以下代码：

$(document).on('pagechange', function(){
    console.log('new page');
    $('.submit').on('click', function(){
      console.log($('this'));
    });
}

每个页面的“新页面”都被写入控制台，但点击只在单个页面上注册（如果我刷新页面，它只在该页面上有效）

关于如何在每个页面上触发点击有什么想法吗？

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

使用 .on() 的选择器参数，在这种情况下，您只需要绑定事件一次，因此请在 document.ready() 处理程序中进行，如下所示：

$(document).ready(function() {
    $(document).on('click', '.submit', function(){
      console.log($('this'));
    });
});

【讨论】：

这行得通，但我为 pageload() 切换了 ready() 函数。我现在唯一的问题是每次页面加载都会触发“新页面”多次，至少 2 次有时 10 次或更多？

【解决方案2】：

在 jquery mobile 中，您应该使用事件 pageinit 等同于传统的 onload。下面的代码应该可以解决问题。

$(document).on('pageinit', function(){
    console.log('new page');
    $('.submit').on('click', function(){
      console.log($('this'));
    });
}

【讨论】：