javascript - Calling .mouseenter( ) is working even though .click( ) won't trigger animation -

in html, have button id of "submit1"

<div id="first">      <form>         <input type="radio" name="school" value="pitt">pitt<br>         <input type="radio" name="school" value="memphis">memphis<br>         <button id="submit1">submit</button>     </form> </div>  

now in jquery, try use .click() trigger div "first" fadeout, so:

$(document).ready(function() {     $('#submit1').click(function(){          $('#first').fadeout('slow');      });  });  

weirdly enough, nothing happens when click submit. thought maybe wasn't calling .js file, alas, when change .mouseenter( ), works trigger fadeout of div.

$(document).ready(function() { $('#submit1').mouseenter(function(){     $('#first').fadeout('slow'); }); });  

i saw old stack overflow post used alert instead of animation, tried during debugging , still worked. literally animations seem break things (tried .slidetoggle, .slidedown, etc. check). thanks!

since submit button inside form element, default click behavior submit form server. internally, js being called causes whole page refresh don't see animation happening. in order prevent this, change code prevent default submit behavior:

$('#submit1').click(function (e) {     e.preventdefault();     $('#first').fadeout('slow'); });