ブートストラップアラートが再び表示される

Question

フォームの提出時に、最初の繰り返しでアラートが表示されますが、アラートはフォームの提出時に再度表示されません。 何がうまくいかない可能性がありますか？ 私は、次しようとした：

<div id="messages" class="hide" role="alert"> 
     <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <div id="messages_content"></div> 
</div> 

スクリプト

$('#myform').submit(function(e) { 
    $('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown().show(); 
    $('#messages_content').html('<h4 class="usefont" style="text-align: center">Thank you message!</h4>'); 
    $('#modal').modal('show'); 
    e.preventDefault(); 
}); 

Answer 1

これが私の解決策であるが、あなたはdata-dismiss属性を削除し、閉じるボタン内部の非表示機能を実装する必要があります。

問題はdata-dismissでした。DOMから要素を完全に削除していました。

$('#myform').on('submit', function(e) { 
 
    $('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown(); 
 
    $('#messages_content').html('<h4 class="usefont" style="text-align: center">Thank you message!</h4>'); 
 
    $('#modal').modal('show'); 
 
    e.preventDefault(); 
 
}); 
 

 
$('#close').on('click', function(e) { 
 
    $('#messages').removeClass('alert alert-success alert-dismissible').addClass('hide').slideUp().hide(); 
 
    $('#messages_content').html(''); 
 
    $('#modal').modal('show'); 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="messages" class="hide" role="alert"> 
 
    <button type="button" id="hide" class="close" aria-label="Close"><span id="close">&times;</span></button> 
 
    <div id="messages_content"></div> 
 
</div> 
 
<form action="" id="myform"> 
 
    <button type="submit">submit</button> 
 
</form>