js doesn't work if I don't refresh the page after first load,and div's background-img also doesn't show.
code:<a data-role="button" data-icon="plue" href="register.jsp" data-transition="pop">register</a>
js and css can be successfully loaded if I set data-ajax='false',but I want to have a transition
jQM doesn't load a full page when AJAX is turned on, it fetches the page and then strips out anything in the head tag. Their logic is that this stuff will stay consistent throughout your application so for the sake of fewer downloads and faster load time, remove it, parse the HTML and inject it as a new page (which is why you also get the hashtag navigation).
jQM will also not run any JS that is within a page if AJAX is running. So if you're doing something like onClick="SomeJS();" this will not run. Which you shouldn't be doing anyway with jQuery in general.
To get around that and to prevent JS errors for elements that aren't on every page, I've started doing something like this:
Just after your body tag, put a wrapper DIV or Section (since any smart phone reads HTML5 pretty well) with an id or distinct class and add the data-role="page" attribute.
<body>
<div id="page1" data-role="page">
... page content ...
</div>
</body>
Keep all of your JS in one file or reference all of your files on every page. When you have a page specific script that needs to run, wrap it in something like this:
$('#page1').live('pageshow', function() {
//do what you need to do
});
Hopefully that helps.