jQuery Mobile的：通过ID不能很好地工作

Question

我已经与jQuery Mobile的一个奇怪的问题......下面是我的应用程序的HTML 代码：

<!-- == START MAIN PAGE == --> 
<div id="mainPage" data-role="page"> 
    <div data-role="header" data-position="fixed"> 
     <a href="#addContactPage" 
       data-transition="slidedown" 
       data-rel="dialog" 
       data-icon="plus" 
       data-iconpos="notext">Add a contact</a> 
     <h1>My repertory</h1> 
    </div> 
    <div data-role="content"> 
     <p> 
      Welcome to your repertory! 
     </p> 
     <ul id="contacts_list"></ul> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <h1>Made with <em>jQuery Mobile</em></h1> 
    </div> 
</div> 
<!-- == END MAIN PAGE == --> 

<!-- == START ADD CONTACT PAGE == --> 
<div id="addContactPage" data-role="page"> 
    <div data-role="header"> 
     <h1>My repertory: add a contact</h1> 
    </div> 
    <div data-role="content"> 
     <form id="addContactForm" action="#mainPage"> 
      <div data-role="fieldcontain">  
       <input type="submit" value="Valid" /> 
      </div> 
     </form> 
    </div> 
</div> 

当主页显示，我想设置<UL>清单内的项目：

//When the main page is created. 
$('#mainPage').live('pagecreate',function() 
{ 
    //Just after the page is shown 
    $(this).bind('pageshow',function() 
    { 
     alert('Event triggered!'); 
     $('#contacts_list').html('<li>Reset list!</li>'); 
    }); 
}); 

所以，这里是我的问题：当我开始应用程序，此代码工作并设置项目。

如果我打开“添加联系人页面”（请注意它是一个对话框）并关闭它，此代码也可以正常工作，并且预期结果已完成。

但是，如果我打开“添加联系人页面”，然后提交它的形式，列表变为空！ alert（）已完成，因此事件被触发...但是该列表为空，就像没有调用方法那样（html（））。 我试过提醒* $（'＃contacts_list'）的值，长度为1，因此存在jQuery对象！

请注意，我在提交表单时没有做任何事情：提交事件没有听众。

如果我通过这一个替换代码：

//When the main page is created. 
$('#mainPage').live('pagecreate',function() 
{ 
    //Just after the page is shown 
    $(this).bind('pageshow',function() 
    { 
     alert('Event triggered!'); 
     $(this).find('#contacts_list').html('<li>Reset list!</li>'); 
    }); 
}); 

然后它工作得很好！

我真的不明白......

为什么预期的结果与$（本）.find（ '＃contacts_list'）来完成，而不是用$（ '＃contacts_list'）？

在此先感谢！

Answer 1

看起来您的表单提交导致第二个事件绑定到pageshow。如果您删除（或更改）表单上的操作会发生什么？另外，尝试：

$(this).unbind('pageshow').bind('pageshow',function()...

编辑

我认为外部函数很可能是多余的。为什么不简化一大堆：

$('#mainPage').live('pageshow',function() 
    { 
    alert('Event triggered!'); 
    $(this).find('#contacts_list').html('<li>Reset list!</li>'); 
    } 
);