Why do I have to refresh each page to get the jQuery to work properly on each of them?

问题

I'm using jQuery Mobile and I'm trying to move a simple list item around from one page to another. Here's one snippet of code I'm using:

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

Now this works great, when I refresh #summaryPage, click back to #YesNoMaybePage and execute the event. It however does not work if i refresh the #YesNoMaybePage and than execute it. I assume the html on the #summaryPage has not loaded when I refresh the #YesNoMaybePage and than that is the reason why it isn't working, but I honestly don't know. Any ideas why that might be and how I can fix this?

Thanks a bunch world. I love u. For further clarification here's another snippet a code I have with the exact same issue:

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

回答1:

Are both these 'pages' in the dom at the same time? It appears that you are trying to prepend an html element to a page that isn't currently being displayed. That won't fly, you can only modify the currently loaded dom.

回答2:

It's probably because your javascript is included in your summarypage.html and not in your yesnomaybepage.html. This is an expected behaviour with jqm. You have to either include the same js in every pages of your site, or pack all your page into a single html file. http://jquerymobile.com/demos/1.2.0/docs/pages/multipage-template.html

回答3:

I have the same problem before. My problem is with the turbolink. By disable it it work perfectly for me. Here is a very easy way to remove it: Go to app/assets/javascripts/application.js

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

Just remove the equal sign in front of turbolink

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

And that's it

来源：https://stackoverflow.com/questions/14331317/why-do-i-have-to-refresh-each-page-to-get-the-jquery-to-work-properly-on-each-of