Jquery Onclick button is working only once

user_13935481 0
Viewed 121

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>

html jquery javascript
3 Answers

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>

user_60524270

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>

user_141040

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

user_8924150
Related