如何在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选择器并不是很有用。我现在的问题是，每次我导航到此页面时，提交事件都会再次绑定，从而导致存储不同的(！)值。submit事件似乎被触发了多次，并且与last之前的值相比更有趣。

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

TRY1:

我现在将提交事件绑定放在页面中，然后再显示类似的事件：

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

您需要从本地存储加载并存储在页面上，这需要通过绑定到pagebeforeshow事件来完成(请参阅"页面转换事件"一节)，而不是像您当前所做的那样绑定到pageinit事件。

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

此外，通常每个页面元素(您有数据角色="页面")都应该有一个唯一的ID，这样您就可以使用它来代替CSS选择器。

Answer 2

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

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