Mark pages in jQueryMobile (1.0Alpha4.1) for jQuery selectors
Let's say we want to bind an event listener on a page other than the mobile front, as in:
$(function() {
$("#my-div").bind("foo.bar", handleFooBar);
});
In jQueryMobile the usual approach of the above won't work as that block will execute once when the front page is loaded and not again the jQM actually fetches and loads the page with #my-div in it. I know how to cheat-around that by using one of the live approaches; but in various places (including the docs) I've seen folks select a page level id or开发者_如何学运维 class, e.g.,
$("#second-page").live("pagecreate", function() {
$("#my-div").bind("foo.bar", handleFooBar);
});
But I've been unable to get jQM to assign classes or id's for page level div's loaded after the first one, i.e., I start with
Front page
<body>
<div id="front-page-id" class="front-page-class" data-role="page">
<a href="/second-page">next</a>
</div>
</body>
Second page
<body>
<div id="second-page-id" class="second-page-class" data-role="page"></div>
</body>
And after opening the front page and navigating to the second, there's a DOM like:
body
div.ui-page.front-page-class#front-page-id[data-role="page"]
div.ui-page.ui-page-active[data-role="page"]
That is, all pages but the front without their ids or classes.
Should that work (ids and classes come through)?
Pages that jquery mobile loads in are always tagged with a data-url atribute. To get something done when the page is being displayed (just like it used to be with DOMready) you can:
$("div:jqmData(url='thatone.html')").live('pageshow',function(e){
//stuff
});
And this definition can be anywhere in the main page or in external scripts. It requires jQuery to be loaded. Thanks to the live method it doesn't require the page to exist before the event happens, or even at all.
If using multipages, you can mark them yourself.
加载中,请稍侯......
精彩评论