1

试图将提交事件（或单击或其他）绑定到 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 中进行脚本编写？

尝试1：

我现在将提交事件绑定放置在 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);        
});
4

3 回答 3

1

导航页面时触发的多个事件对我来说听起来像是多个绑定，这是 jQuery Mobile 的一个已知问题。导航页面时绑定不会解除绑定，因为所有内容都是通过 AJAX 加载的。例如，请参阅此 StackOverflow 问题：Jquery mobile .click 在新页面访问或我的解决方案中多次触发。

于 2012-10-03T08:37:09.577 回答
1

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

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

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

于 2012-10-03T08:38:29.987 回答
0 
$('.classSelector').on('submit', function(){})

 Try to use the constraction to bind your event to element.
 Look likes some data was loaded through ajax request
于 2012-10-03T08:17:14.173 回答