如何在 jQuery Mobile 页面中绑定提交事件

Question

试图将提交事件（或单击或其他）绑定到 jQuery 移动页面中的元素。我想做的是从 jQuery 页面的表单元素中的输入中获取值，并将其存储在 cookies/localStorage 中。每次我回到这个页面我都想恢复输入字段。

目前我最终使用了这个脚本：

    $('.pageClassSelector').live('pageinit', function (e) {

        $('.classSelector').submit(function () {
            var q = $('.inputClassSelector').val();
            // store to localStorage ...
        });

    // load from localStorage ...
    $('.q').val(lastSearchString);

    });

这种方法记录在http://jquerymobile.com/test/docs/api/events.html

由于 DOM 中似乎有可能保存相同的页面，所以 ID 选择器并不是很有用。我现在的问题是，每次我导航到此页面时，提交事件都会再次绑定，因此会导致存储不同的（！）值。提交事件似乎被触发了多次，并且使用 last 之前的值更有趣。

我做错了什么吗？任何提示如何在 jquery mobile 中正确执行脚本？

试一试：

我现在将提交事件绑定放置在 pagebeforeshow 事件中，如下所示：

$('#PageId').on('pagebeforeshow', function (e) {
    $('.classSelector').on('submit', function () {
            var q = $('.q').val();
            alert('stored: ' + q);         
    }
    $('.q').val(lastSearchString);
}

但是要存储的值仍然是上次之前的值，当我之前导航页面时。第一次按原样工作。

尝试2：

这就是我现在所拥有的，看起来它可以满足我的需求。我现在选择当前页面并仅选择作为该页面子级的表单。 这是好的做法吗？

$('div:jqmData(id="PageId")').on('pagebeforeshow', function (e) {

     $(this).find('#form').on('submit', function () {
        var q = $(this).find('#input').val();
        localStorage.setItem("key", q);
        return true;
    });

    lastSearchString = localStorage.getItem("key");
    $(this).find('#input').val(lastSearchString);        
});

Answer 1

您需要通过绑定到 pagebeforeshow 事件（查看“页面转换事件”部分）而不是像您当前正在执行的 pageinit 事件来完成从本地存储加载和存储在页面上的要求。

$('.pageClassSelector').on('pagebeforeshow', function (e) {
    // load from localStorage ...
    $('.q').val(lastSearchString);
});

此外，通常每个页面元素（您有 data-role='page'）都应该有一个唯一的 ID，以便您可以使用它来代替 CSS 选择器。

Answer 2

导航页面时触发的多个事件对我来说听起来像是多个绑定，这是 jQuery Mobile 的一个已知问题。导航页面时绑定不会解除绑定，因为所有内容都是通过 AJAX 加载的。例如，请参阅此 StackOverflow 问题：Jquery mobile .click firing multiple times on new page visit 或 my solution。

Answer 3

$('.classSelector').on('submit', function(){})

 Try to use the constraction to bind your event to element.
 Look likes some data was loaded through ajax request