为什么我必须刷新每个页面才能让 jQuery 在每个页面上正常工作？答案

【问题标题】：Why do I have to refresh each page to get the jQuery to work properly on each of them?为什么我必须刷新每个页面才能让 jQuery 在每个页面上正常工作？
【发布时间】：2013-01-15 04:43:35
【问题描述】：

我正在使用 jQuery Mobile，我正在尝试将一个简单的列表项从一个页面移动到另一个页面。这是我正在使用的一个 sn-p 代码：

$('#YesNoMaybePage, #summaryPage').live('pageinit', function() {
$('.green, .blue, .red').click(function(){
    var $move = $('.purchase').prependTo("#summaryPage .theListItem");
});
});

现在效果很好，当我刷新#summaryPage 时，点击返回#YesNoMaybePage 并执行事件。但是，如果我刷新 #YesNoMaybePage 并执行它，它就不起作用。我假设刷新#YesNoMaybePage 时#summaryPage 上的html 没有加载，这就是它不起作用的原因，但老实说我不知道。任何想法为什么会这样以及我如何解决这个问题？

感谢一堆世界。我爱你。为了进一步澄清，这里有另一个 sn-p 代码，我有完全相同的问题：

$('#YesNoMaybePage, #categorizePage').live('pageinit', function() {
$('.green, .blue, .red').click(function(){
    var $move = $('.purchase').prependTo("#categorizePage .theListItem");
});
});

【问题讨论】：

标签： jquery jquery-mobile prepend

【解决方案1】：

这两个“页面”是否同时在 dom 中？您似乎正在尝试将 html 元素添加到当前未显示的页面。那不行，只能修改当前加载的dom。

【讨论】：

是的，我认为这正是问题所在！如何将两个页面同时放入 dom 中？我认为 jQuery Mobile 使用 ajax 并一次加载每个页面，我认为这是可行的，但我可能错了。
您为什么要这样做？你在干嘛？你在使用数据库吗？我不知道您要做什么，但通常通过修改数据库中的记录将一个项目从一个列表“移动”到另一个列表。
我还没有使用数据库......我是第一次构建一个应用程序，并试图在让程序员朋友帮我添加数据库之前尽可能多地完成。我只是想让一个列表项从第一个列表移动到其他 3 个列表中的 1 个，具体取决于用户是单击红色、绿色还是蓝色。其他 3 个列表在另外 3 个页面上。
列表是否只存储在 javascript 中？您不能只修改一个页面中的变量，然后转到另一个页面并保留更改。打电话给你的程序员朋友，或者阅读会话变量。
甜蜜。我想我已经尽我所能仅使用 jQuery 和 CSS 并且要使更改持续存在，我需要添加后端吗？

【解决方案2】：

这可能是因为您的 javascript 包含在您的 summarypage.html 中，而不是您的 yesnomaybepage.html 中。这是 jqm 的预期行为。您必须在站点的每个页面中包含相同的 js，或者将所有页面打包到一个 html 文件中。 http://jquerymobile.com/demos/1.2.0/docs/pages/multipage-template.html

【讨论】：

【解决方案3】：

我以前也有同样的问题。我的问题是turbolink。通过禁用它，它对我来说非常有用。这是一个非常简单的删除它的方法：转至app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .

把turbolink前面的等号去掉就行了

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
// require turbolinks
//= require_tree .

就是这样

【讨论】：