1

フィドルの例

このサイトには、次のように HTML で定義された 2 つ (またはそれ以上) のページがあります。

<div id="page1" data-role="page">
    <div data-role="content" id="page1-content">
        <a href="#page2" data-role="button">Next Page</a>
    </div>
</div>

<div id="page2" data-role="page">
    <div data-role="content" id="page2-content">
        <a href="#page1" data-role="button">Go Back</a>
    </div>
</div>

Javascript では、すべてを一度に初期化しています。

$(function(){
    $('#page1-content, #page2-content').each(function(){
        var ul = $('<ul>');
        $.each(['one','two','three'], function(item){
            ul.append('<li><a href="#">'+item+'</a></li>');
        });
        ul.appendTo(this).listview();
    });
});

But the page only initializes the list view on the 1st page, and the list view on the 2nd (and not currently visible) page does not initialize and gives me an error.

Cannot read property 'jQuery19107783124386332929' of undefined

What am I doing wrong?

I really want to be able to start fetching the data and at least create the DOM in every page at once in the beginning, rather than waiting till the user clicks "Next Page".

Also - the list view on the first page is overlapping the "Next" button. I see this overlapping often and would like to fix/understand this too.

4

2 に答える 2