Jquery Onclick 按钮仅工作一次

Question

On click button, it's working fine for the first time but when I click again it's not working...

 $(document).on('click', '#btn', function(){ $( "#response").html('GOOD').fadeOut(2000) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="response"></div> <button id="btn">Click Me</button>

Answer 1

it will be work for u

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="response"></div> <button id="btn">Click Me</button> <script> $(document).on('click', '#btn', function(){ $("#response").show().html('GOOD').fadeOut(2000); }); </script>

Answer 2

You are hiding an element. First time it is visible and it hides. Second time it is hidden and hides. You need to show it.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="response"></div> <button id="btn">Click Me</button> <script> $(document).on('click', '#btn', function() { $("#response").html('GOOD').show().fadeOut(2000); }); </script>

Answer 3

You never fadeIn the div , so it remains hidden. Which is why the button only works once.