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>

显示主页面时，我想在＆lt; ul＆gt; 列表中设置一个项目：

//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 对象存在！

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

如果我用这个替换代码：

//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

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

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

修改

我认为外部功能可能是多余的。为什么不简化整个批次：

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

jQuery Mobile：按ID选择效果不佳

1 个答案: