Twitter Bootstrap简单隐藏（）不起作用

Question

I have a simple form which has an error message pop up if one of the forms is empty using Twitter's Bootstrap system.

The error message pops up and I have set a simply JQuery function to hide the error box when the "X" is clicked but it fades away then pops back again. Really bizarre, anybody come across this before?

Code is:

Javascript

<script type="text/javascript">
$(document).ready(function() {
$(".close").click(function() {
    $(".alert").hide();
});
});
</script>

HTML

<div class="alert alert-error"><button class="close">&times;</button>
Uh oh, you forgot your name! Dont worry we do it all the time...</div>

Like I said, the PHP renders the code fine, the Javascript obviously works as it starts to fade then snaps back to appeared again. Only just started using Bootstrap so apologies if this is a noob question...

Thanks in advance,

Jack

Answer 1

The bootstrap documentation states to use this attribute:

data-dismiss="alert"

Does this work if you add it?