1

我正在使用带有 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功能两次，数据丢失。

4

3 回答 3

1

如果您<script>在该部分中添加了标签<header>，则您的事件将仅在第一个页面加载时绑定。如果您将<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

于 2013-02-08T23:14:50.210 回答
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>

要解决此问题，请使用页面事件转换顺序一章中列出的任何页面事件（这是我关于 jQuery Mobile 页面事件绑定的其他答案/文章）。

于 2013-02-09T16:32:19.820 回答
0

如果您执行 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);
});

由于elemdiv 未定义为<div id="elem"></div>, 但是<div id="elem"/>，这会导致麻烦。

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

于 2015-02-26T14:29:06.803 回答