CODEWITHSUNDEEP
jquery
Ari Ab
Ari Ab

Reputation: 39

How to prevent button from disabling after a click

After the alert appears I have x button on it that when clicked on the alert box disappears. I can no longer get the alert to appear again unless I refresh the page. I want to know how to keep the button from disabling and keep it active.

jQuery

$(document).ready(function(){
    $('.couponalert').on("click", function(){
        $('#myalert').fadeIn(2000)

    })
});

HTML

bootstrap alert

 <div class="alert alert-success" id="myalert" role="alert" align="center" style="font-size:2em">
    <button style="font-size:2em" type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
      <strong><u>Available Coupons</u><br> Use this <a href="https://takeoutkit.com?rfsn=1589618.63e1cd&utm_source=refersion&utm_medium=affiliate&utm_campaign=1589618.63e1cd">LINK</a> to receive 10 percent off of your first Order from Takeout Kit</strong>
    </div>

button

<li ><a class="couponalert" href="#">Coupons</a></li>

Upvotes: 1

Views: 29

Answers (1)

31piy
31piy

Reputation: 23859

By default, Bootstrap Alert's close button removes it from the DOM, instead of hiding it. You can override this behaviour by using:

$('#myalert button.close').click(function(e) {
  e.preventDefault();
  $('#myalert').fadeOut();
});

Do this in the $(document).ready( ... ) handler, and you will be able to bring it back again.

Be advised that this will prevent the events close.bs.alert and closed.bs.alert from firing. If you're not doing much with those events, you're all set.

Upvotes: 1

Related Questions