JSFiddleでブートストラップアラートが一度だけ表示される

Question

初めて保存ボタンをクリックすると、アラートが正常に表示されます。しかし、それ以降は、私がハードリフレッシュをしなければアラートが表示されません。ここで

はJSFiddleです：あなたはそれを再度開くことができないので、JSFiddle

$("#success-alert").hide(); 
 
$("#saveChange").click(function showAlert() { 
 
    $("#success-alert").alert(); 
 
    $("#success-alert").fadeTo(2000, 500).slideUp(500, function() { 
 
    $("#success-alert").alert('close'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
    
 
<div class="product-options"> 
 
    <button id="saveChange" href="javascript:;" class="btn btn-mini">Save</button> 
 
</div> 
 
<div class="alert alert-success" id="success-alert"> 
 
    <button type="button" class="close" data-dismiss="alert">x</button> 
 
    <strong>Success! </strong> 
 
    Your changes has saved. 
 
</div>

Answer 1

ライン

$("#success-alert").alert('close'); 

はアラートを破壊します。
その行を削除すると、毎回警告が表示されます