javascript - jQuery 移动 : selecting by ID doesn't work well

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>

当显示主页时，我想在

列表中设置一个项目:

//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').lenght* 的值，结果为 1，因此 jQuery 对象存在!

请注意，在提交表单期间我没有执行任何操作:其 submit 事件没有监听器。

如果我用这个替换代码:

//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>');
    });
});

然后就可以正常使用了!

实在是看不懂……

为什么预期结果是用 $(this).find('#contacts_list') 完成的，而不是用 $('#contacts_list') 完成的？

提前致谢!

Answer 1

您提交的表单似乎会导致第二个事件绑定(bind)到页面显示。如果删除(或更改)表单上的操作会发生什么？另外，请尝试:

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

编辑

我认为外部函数很可能是多余的。为什么不将整个事情简化为:

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