I’m running some jQuery/JavaScript events/methods and they work only for a moment after which the whole document regains it’s former content. How come?
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//jquery
$("#f").submit(function(){
$("h3").toggle();
//alert("hello");
});
$("button").click(function(){
alert("ZZZZZ");
});
});
</script>
<title>Catalog Nova Grup</title>
</head>
<body>
<center>
<h3 style="color:#00F">Catalog Nova Grup</h3>
</center>
<form id="f">
<select id="s1">
<option>---</option>
<option>ZZZ</option>
</select>
<select id="s2"></select>
<select id="s3"></select>
<input type="submit" id="sb" />
</form>
<button>ZZZ</button>
</body>
</html>
You probably need to either
return falsefrom your event handler or usee.preventDefault()whereeis the event object passed to your event handler.For example, in the
submithandler attached to a<form>element you should do either:or:
EDIT:
What’s happening is the browser is submitting the form, which by default results in the page reloading