Jquery mobile example not working in browser - browser

Question

I have created an example of jquery mobile which is completely working properly in jsfiddle.net but it's not working at all in any of the browser. i m providing the related links where you can test both in browser and jsfiddle.
note:jsfiddle.net is the site where you can run and test the jquery examples.
for brower : http://errortec.blogspot.in/
u can copy the code from the errortec.blogspot.in and place it in your html file and check it in ur browser so that u can understand the problem

Answer 1

Try enclosing your script in a ready function:
$(document).ready( function() {
//your script here
});
There is also a spelling mistake the text attribute of your script tag is text/javacsript.
The navigation should also work if you simply use href attributes for your links.
For jquery mobile, some specific events are available: pageinit, pagecreate, pageshow.
Update: your click handlers should be added in the jQuery ready handler:
<script type="text/javascript">
$(document).ready( function() {
$('#prevchild').click(function() {
$.mobile.changePage($('#home'), {
transition: 'slide',
reverse: true
});
});
$('#nextchild').click(function() {
$.mobile.changePage($('#child'), {
transition: 'slide',
reverse: true
});
});
$('#login').click(function() {
$.mobile.changePage($('#child'), {
transition: 'slide',
reverse: true
});
});
$('#back').click(function() {
$.mobile.changePage($('#home'), {
transition: 'slide',
reverse: true
});
});
$('#next').click(function() {
$.mobile.changePage($('#child'), {
transition: 'slide',
reverse: true
});
});
$('#prev').click(function() {
$.mobile.changePage($('#home'), {
transition: 'slide',
reverse: true
});
});
});
</script>
I have tried your code in Chrome and it works with this small change.

Answer 2

There is no start tag for your body. It should start between the last script tag and the first div.

Answer 3

In this case try to keep the javascript in on windows.load() as shown below :
<script type="text/javascript">
window.onload=function(){
$('#prevchild').click(function() {
$.mobile.changePage($('#home'), {
transition: 'slide',
reverse: true
});
});
$('#nextchild').click(function() {
$.mobile.changePage($('#child'), {
transition: 'slide',
reverse: true
});
});
$('#login').click(function() {
$.mobile.changePage($('#child'), {
transition: 'slide',
reverse: true
});
});
$('#back').click(function() {
$.mobile.changePage($('#home'), {
transition: 'slide',
reverse: true
});
});
$('#next').click(function() {
$.mobile.changePage($('#child'), {
transition: 'slide',
reverse: true
});
});
$('#prev').click(function() {
$.mobile.changePage($('#home'), {
transition: 'slide',
reverse: true
});
});
}
the body component is loaded after the script is executed & by using onload() script will execute after the component is loaded it so component will be aware of the script
i tried it and was helpfull to me ; i hope some one facing same problem will find it help full.