在jquery mobile中使用URL参数多次调用动态页面答案

【问题标题】：live 'pagecreate' calling multiple times Dynamic pages using URL parameter in jquery mobile在jquery mobile中使用URL参数多次调用动态页面
【发布时间】：2013-02-08 20:18:24
【问题描述】：

我正在使用带有 phonegap 的 jQuery mobile 来创建一个 iPhone 应用程序。我在 URL 中传递动态 id 以从数据库中获取数据并在页面加载时填写页面上的字段。

$.mobile.changePage( "child-form-page.html?id=1");

它第一次运行良好，并且调用了 data-roll div id live 函数

$('#childForm').live('pagecreate',function(event){ 
  //Fetch data and fill fields based on ID i get in url
});

但是当我提交表单并使用同一页面移动到下一个表单时$.mobile.changePage( "child-form-page.html?id=2"); 是触发$('#childForm').live 函数两次并且数据丢失。

【问题讨论】：

我在下面的回答中为您提供了解决方案，如果您需要更多帮助，请通过我的电子邮件与我联系。

标签： jquery html cordova jquery-mobile

【解决方案1】：

由于您没有向我们提供更多代码，我只能为您提供解决问题的方法。 jQuery Mobiles 的工作性质会在绑定事件时给我们带来一些问题。 jQuery 事件绑定没有阻止多个事件（同一事件，例如单击事件）绑定到单个元素的检查。

这可以通过几种方式来防止，我会为你列举所有这些，但我认为你的问题与多事件绑定无关，因为与 jQuery 不同，jQuery Mobile 页面事件绑定会阻止多绑定，在这种情况下你会在我的答案底部找到您的解决方案。

解决方案 1：

在绑定之前移除事件：

$('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').die().live('click', function(e) {
        alert('Button click');
    });    
});

如果你有不同的事件绑定到一个对象：

$('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').die('click').live('click', function(e) {
        alert('Button click');
    });    
});

解决方案 2：

使用 jQuery 过滤器选择器，如下所示：

$('#carousel div:Event(!click)').each(function(){
    //If click is not bind to #carousel div do something
});

因为事件过滤器不是官方 jQuery 框架的一部分，所以可以在这里找到：http://www.codenothing.com/archives/2009/event-filter/

简而言之，如果您主要关心的是速度，那么解决方案 2 比解决方案 1 好得多。

解决方案 3：

一个新的，可能是其中最简单的一个。

$(document).on('pagebeforeshow', '#page', function(event){  
    if(event.handled !== true) // This will prevent event triggering more then once
    {
        // Some code
        event.handled = true;
    }
    return false;                
});

此解决方案的 Tnx 至 sholsinger：http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/

pageChange 事件怪癖 - 触发两次

有时pagechange事件会触发两次，和前面提到的问题没有任何关系。

pagebeforechange 事件发生两次的原因是由于在 toPage 不是 jQuery 增强的 DOM 对象时 changePage 中的递归调用。这种递归是危险的，因为允许开发人员在事件中更改 toPage。如果开发人员始终将 toPage 设置为字符串，则在 pagebeforechange 事件处理程序中，无论它是否是对象，都会导致无限递归循环。 pageload 事件将新页面作为数据对象的页面属性传递（这应该添加到文档中，当前未列出）。因此，pageload 事件可用于访问加载的页面。

简而言之，这是因为您正在通过 pageChange 发送其他参数。

例子：

<a data-role="button" data-icon="arrow-r" data-iconpos="right" href="#care-plan-view?id=9e273f31-2672-47fd-9baa-6c35f093a800&amp;name=Sat"><h3>Sat</h3></a>

要解决此问题，请使用章节 Page events transition order 中列出的任何页面事件（这是我关于 jQuery Mobile 页面事件绑定的其他答案/文章）。

【讨论】：

【解决方案2】：

如果您在<header> 部分中添加了<script> 标记，则您的事件将仅在第一个页面加载时绑定。如果您将<script> 标签作为<div role="page"> 标签的第一个子标签，它将被反复绑定。

此页面底部的详细信息： http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html

另外，请确保您没有使用$(document).ready(); http://jquerymobile.com/demos/1.2.0/docs/api/events.html

【讨论】：

【解决方案3】：

如果您执行 DOM 操作，例如通过 pagecreate 处理程序中的 jQuery，您可能会无意中触发此类行为。

<div data-role="page" id="somePage"> 
  <div id="elem"/>
</div>

和处理程序：

$('#somePage').on("pagecreate", function() {    
  var table = $('<table></table>').addClass('t');                                                       
  $('#elem').append(table);
});

由于elem div 没有定义为<div id="elem"></div>，而是<div id="elem"/>，这就导致了麻烦。

因此，它很可能与您要传递的动态 id 无关。

【讨论】：