Javascript 如何在jQuery移动页面中绑定提交事件

尝试将提交事件（或单击或其他）绑定到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);

    });

这里记录了这种方法

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

我做错什么了吗？有没有关于如何在jquery mobile中正确编写脚本的提示

TRY1：

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

---

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

您需要通过绑定到pagebeforeshow事件（请参阅“页面转换事件”一节）而不是像当前那样绑定到pageinit事件来完成从本地存储加载并在页面上存储的要求

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

---

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

jQuery mobile使用ajax调用加载每个页面，是的。尝试过你的方法，但没有任何区别。。还有其他提示吗？你的意思是每次我导航到同一个页面时，这个页面都应该有一个唯一的id吗？没有，我的意思是每页都有一个唯一的id。你可以在这里看到JQuery mobile对页面的剖析（忽略这个事实，这是它仍然适用于你的最新版本）。我按照您的建议做了。请查看我的编辑。您是否可以编辑您的问题以包含完整的代码，或者至少如何获取

lastSearchString

的值？你是说lastSearchString中的值是上一次提交的值吗？没错。但与此同时，我找到了解决办法。你能看一下吗？

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