Question

我在使用jQuery mobile时遇到了很多问题，并且真的很想拍自己的头脑。

我有一个包含此代码的页面：

$(document).on('pageinit ',function(){
$("#phone_number").on("blur", function (event, ui) {


    $.mobile.changePage("<?php echo base_url(); ?>mobile/products_by_phone",  {
     type: "POST",
     data: {phone :  $('#phone_number').val() },
    transition: "flip"} );

});
});

现在该页面包含有效的html和jQuery mobile标记，其中包含以下代码：

$(document).on('pageinit ',function(){
 alert();
 });

现在，当我更改页面时，它可以正常工作，但是当我再次调用blur事件时，页面会更改两次，我会再次执行4次，然后是8次等等。

按下浏览器后退按钮可以正常工作，但是当我尝试按下前进时没有任何反应。

注意：

我认为也许它与模糊有关，每次更改页面都会出现模糊，所以我尝试添加一个按钮并绑定到一个点击但同样的事情很好看
我想也许我绑定到document的事实导致它，所以我尝试绑定到页面ID但是根本不起作用（没有任何事情发生，因为没有事件被绑定），然后我尝试触发创建事件，但也没有绑定事件

为什么会这样？

Answer 1

你所要做的就是添加你想要绑定init事件的页面...假设你想要这个绑定一次，你需要更具体。

示例：

$(document).on('pageinit', '#page1', function(e){...});

将＃page1替换为您的网页ID。

Answer 2

我不熟悉jQuery mobile，但我认为changePage()函数使用AJAX调用加载新的页面内容。如果是这种情况，则现有的事件处理程序将保留，并且您每次只需添加更多事件处理程序。

尝试使用.off()函数删除事件处理程序（重新绑定）。

Answer 3

这是一个常见的jQuery移动问题。这是因为多个事件绑定到同一个元素。每次返回上一页时，都会再次绑定同一事件。

这个问题有2个解决方案。

在将事件绑定到某个元素之前，请检查该事件是否尚未绑定。

示例：

$('.menu-browse:Event(!' + touchEvent + ')').each(function(){ $('.menu-browse').bind(touchEvent, function(e) { }); });

在这里，您将找到事件过滤器的完整实现：http://www.codenothing.com/archives/2009/event-filter/

或者：

每次绑定事件时，请先取消绑定。

示例：

$(document).unbind(); $(document).bind('pageinit', function(e) { });

或：

$(document).die(); $(document).live('pageinit', function(e) { });

或在你的情况下：

$(document).off(); $(document).on('pageinit',function(){ alert(); });

可悲的是，没有针对此问题的防弹解决方案。

pageChange不会删除旧事件

3 个答案: