Need help with bind pageInserted function in jquery

I would need some help to understand how to get a script that I have working in my index.html file, to work in a subpage that I load with ajax.

In my index file I have a script that works in that page, good. And now I want it to work with a seperat html page that I load with -ajax-jquery.

I guess that I need to use something like .bind('pageInserted'..... but I dont know how.

The script makes you scroll the both divs both up/down and you can slide back/fort.

The script that I have in my index file(and that works there) is:

var page_flip, vertical_scroll,myScroll,
    disable_h = disable_v = false,
    prev_page = prev_x = prev_y = 0,
    pages;

function loaded() {
    setTimeout(function () {
        pages = document.querySelectorAll('.scroller');

        page_flip = new iScroll('pageflip', {
            hScrollbar: false,
            vScrollbar: false,
            snap:true,
            momentum:false,
            onScrollEnd: updateVerticalScroller
        });

        vertical_scroll = new iScroll(pages[page_flip.pageX], {
            hScrollbar: false,
            vScrollbar: false
        });



        // Free some mem
        window.removeEventListener('load', loaded, false);
    }, 100);
}

function updateVerticalScroller () {
    prev_x = vertical_scroll.x;
    prev_y = vertical_scroll.y;

    if (page_flip.pageX!=prev_page) {
        if (page_flip.pageX == 0)
            highlightStartPageButton();
        else if (page_flip.pageX == 1)
            highlightMenuButton();

        vertical_scroll = vertical_scroll.destroy();
        pages[prev_page].style.webkitTransitionDuration = '0';
        pages[prev_page].style.webkitTransform = 'translate3d(' + prev_x + 'px, ' + pr开发者_开发技巧ev_y + 'px, 0)';
        vertical_scroll = new iScroll(pages[page_flip.pageX], {
            hScrollbar: false,
            vScrollbar: false
        });
        prev_page = page_flip.pageX;
    }
}

and the divs in the index file is:

<div id="pagewrapper">
    <div id="pageflip">


<div class="scrollerwrapper">
<div class="scroller">

content in div1 (page1) goes here.........

</div>
</div>

<div class="scrollerwrapper">
<div class="scroller">

content in div2 (page2) goes here.........

</div>
</div>


</div>
</div>

The subpage demo.html that I want to work with this script looks like the divs in the index file + two divs at the top for the iscroll script to work:

    <div id="wrapper22" class="scrollerwrapper">--need this for the iscroll to work
<div id="mag1" class="scroller2">--need this for the iscroll to work


<div id="pagewrapper">
<div id="pageflip">


<div class="scrollerwrapper">
<div class="scroller">

content in div1 goes here.........

</div>
</div>


<div class="scrollerwrapper">
<div class="scroller">

content in div2 goes here.........

</div>
</div>

</div>
</div>


</div>
</div>

I would really appriciate some help to uderstand how to fix this and getting it to work. Thanks a lot!

---

Are you using .load() from jQuery to load the page via AJAX? Here's the docs for .load(). It lets you setup a callback for when the content has been loaded:

$('#result').load('ajax/test.html', function() {
    alert('Load was performed.');
});

---

Hi roflwaffle I guess I am :-), Im using jqtouch and jquery to load pages(its a mobile app). Im using this script to make the iscroll to work on subpages:

var myScroll;
$(document.body).ready(function(){
    $('#hem').load('home/home1.asp');
    loaded();
  $(this).bind('pageInserted', function(event, info) {

       var $inserted = info.page;
       var $scroll = $inserted.find('.scroller2');

        var elm = $inserted.find(".scrollerwrapper");//document.getElementById('wrapper2');
        if (elm != null)
           elm.css("height", window.innerHeight);//elm.style.height = window.innerHeight + "px";

       myScroll= new iScroll($scroll.attr("id"), {desktopCompatibility:true,hScrollbar: false,vScrollbar: false});

    });
});