I am getting a problem while using .css method of jQuery. when I change current div background color on some event then it changes for a moment like a second and again shows the same background color of div.
Here's my code:
<div id="super">
<div id="parent">
<form>
<input type="text" id="in"/>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("form").submit(function() {
$("#parent").css("background","yellow");
});
});
</script>
You are changing the css on submit. This means that it only changes when you submit the form, but submitting the form, because there is no action, it redirects to itself (default). Your browser then loads the page with it's default style sheet.
The easiest thing to do would be to add a 'return false;' directly after setting the background colour.
The full code would look like this:
<body>
<div id="super">
<div id="parent">
<form>
<input type="text" id="in">
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("form").submit(function() {
$("#parent").css("background","yellow");
return false;
});
});
</script>
</body>
UPDATE: This is how you would do it with e.preventDefault() as recommended in Richard's comment:
(note that you must add a single named parameter (in this case I used 'e') to the submit event handler which passes through the actual Event as an object).
<body>
<div id="super">
<div id="parent">
<form>
<input type="text" id="in">
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("form").submit(function(e) {
$("#parent").css("background","yellow");
e.preventDefault();
});
});
</script>
</body>
I would recommend going with the e.preventDefault() route for future code consistencies sake.
e.preventDefault() inside the submit handler (provided we pass it in, like .submit(function (e) { }. return false; is soooo DOM0. :D
Do you have onclick="return false;" on your form's submit button? If not, the jQuery changes the bg color and you see that while the new page is loading. Once the page reloads, it will of course revert back to original color.
onclick hooks when you're already using something like jQuery? Even more so, the asker already has a fully functioning handler hook using .submit(), so while this (more or less) leads to the (more or less) correct idea, it's an arguably bad way of getting to the point.
onclick is just a habit when handling forms. I know it's probably a bad one. Anyway, the point I was trying to get across is the same as everyone else's. Your form is being submitted and hence reloading the page..submit() hook after I posted the answer, but for some reason felt I had made the point I was trying to make. I probably should have gone back and corrected myself. In any case, @mattlangtree has proposed the correct solution.What you're doing will work, but if you're not submitting a form, you shouldn't hook onto that event.
From a user's perspective, you just want the user to be able to press enter and have the background change? You can do this:
// note, if you only want the user to do this in the the textbox,
// just change the selector from 'document' to whatever the textbox is.
$(document).keypress(function(e) {
if (13 == e.which) {
$("#parent").css("background","yellow");
e.preventDefault();
}
});
click.