单击按钮时警报第二次不起作用

Question

I am using bootstrap version so I have created a slide down menu same like below example.

button not working second time

<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong>
Product have added to your wishlist.

The problem is that when I click on close button in slide down the bar is closing up.

But when I again click on add wish list the slide down is not appearing again.

My problem is not only closing. It should close when i click on 'x' button if not it should close automatically after specific time.

Thanks.

Answer 1

Remove this from your close button 'data-dismiss="alert"' and add one more click function like below:

$(document).ready (function(){
    $("#success-alert").hide();
    $("#myWish").click(function showAlert() {
        $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
            $("#success-alert").slideUp(500);
        });   
    });

    $('#success-alert .close').click(function(){
        $(this).parent().hide();
    });
});

HTML will like:

<div class="product-options">
    <a  id="myWish" href="javascript:;"  class="btn btn-mini" >Add to Wishlist </a>
    <a  href="" class="btn btn-mini"> Purchase </a>
</div>
<div class="alert alert-success" id="success-alert">
    <button type="button" class="close">x</button>
    <strong>Success! </strong>
    Product have added to your wishlist.
</div>

Answer 2

This simple trick worked for me. Use this close.bs.alert bootsrap's event type to hide the element instead of removing it.

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).addClass('hidden');
});

or

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).hide();
});

Answer 3

Instead of writing whole code .I used slideUp() dealy() and slideDown() methods of Jquery.

 $(document).ready(function() { $("#success-alert").hide(); $("#btn2").click(function showAlert() { $("#success-alert").slideDown(300).delay(2000).slideUp(400); }); }); $('#success-alert .close').click(function() { $(this).parent().hide(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="product-options"> <input type="button" id="btn2" value="Add to wish list" /> </div> <div class="alert alert-success" id="success-alert"> <button type="button" class="close" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <strong>Success! </strong> Product have added to your wishlist. </div>