Question

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");
});
});

Answer 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.