JQuery Mobile: выбор по идентификатору не работает

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

Итак, вот моя проблема: когда я запускаю приложение, этот код работает, и элементset.

Если я открою «страницу добавления контакта» (обратите внимание, что это диалоговое окно) и просто закрою ее, этот код также будет работать хорошо, и ожидаемый результат будет достигнут.

Но еслиЯ открываю «добавить страницу контактов», а затем отправляю свою форму, список становится пустым! alert () выполнено, поэтому событие сработало ... Но список пуст, как если бы метод html () не вызывался.Я попытался предупредить значение * $ ('# contacts_list'). Lenght *, и оно равно 1, поэтому существует объект jQuery !

Обратите внимание, что я сделалничего при отправке формы: на ее submit event нет слушателя.

И если я заменю код на этот:

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