Question

尝试将提交事件（或单击或其他）绑定到jquery移动页面中的元素。我想要做的是从jquery页面中的表单元素中的输入中获取值并将其存储在cookie / 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选择器不是很有用。我现在的问题是每次我导航到这个页面时，提交事件再次被绑定，从而导致存储不同的（！）值。提交事件似乎被多次触发，并且在前一个值之前更有趣。

我做了什么完全错误的？任何提示如何在jquery mobile中正确编写脚本？

TRY1：

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

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

但是，当我之前浏览页面时，将要存储的值仍然是之前的值。第一次它按预期工作。

TRY2：

这就是我现在所拥有的，它看起来就像我想要的那样。我现在选择当前页面并仅选择该页面的子页面。这是好习惯吗？

$('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

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

Answer 2

您需要从页面上的本地存储和存储加载需要通过绑定到pagebeforeshow事件（请参阅“页面转换事件”部分）而不是像您当前正在执行的pageinit事件一样。

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

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

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

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

3 个答案: