内容未显示在动态引导警报中

Question

我正在尝试创建动态 bootstrap 警报。但是，消息 'successfully saved' 和 'failed' 没有显示。

当我检查并检查 html 时，我看不到 'a.close' 之后添加的 'strong' 标签。

代码有什么问题？

$(document).ready(function(){
  $('.alert').hide();
  $('#success').click(function(){
 $('.message').text('');
 $('.message').removeClass('alert-danger');
 $('.message').addClass('alert-success');
 $('.alert-success').find('.close').after('<strong>Success: Successfully saved!');    
 $('.alert-success').show();
  });
      
  $('#failure').click(function(){
 $('.message').text('');
 $('.message').removeClass('alert-success');
 $('.message').addClass('alert-danger');
 $('.alert-danger').find('.close').after('<strong>Failed!</strong>');
 $('.alert-danger').show();
  });
  setTimeout(function() { $(".message").fadeOut('slow'); }, 3000); 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="alert message">
 <a href="#" class="close" data-dismiss="alert" aria-label="close">X</a>
  </div>
</div>
<button id="success">Success</button>
<button id="failure">Failure</button>

Answer 1

请更新函数如下。

$('#success').click(function(){
    //$('.message').text('');
    $('.message').removeClass('alert-info');
    $('.message').addClass('alert-success');
    alert($('.alert-success').find('.close').html());
    $('.alert-success').find('.close').after('<strong>Success: Successfully saved!');               
    $('.alert-success').show();
  });

我在这里对 $('.message').text(''); 发表评论，因为此方法 text('') 也会清除锚标记.

这里你还需要删除旧的class和旧的messages.

Answer 2

这是完整的代码

$(document).ready(function(){
  $('.alert').hide();
  $('#success').click(function(){
   $('.message').removeClass('alert-danger');
   $('.message').addClass('alert-success');
   $('.alert-success').find('.close').next().remove().end().after('<strong>Success: Successfully saved!');              
   $('.alert-success').show();
});
$('#failure').click(function(){
  $('.message').removeClass('alert-success');
  $('.message').addClass('alert-danger');
  $('.alert-danger').find('.close').next().remove().end().after('<strong>Failed!</strong>');
  $('.alert-danger').show();
});
setTimeout(function() { $(".message").fadeOut('slow'); }, 3000);
});

内容未显示在动态引导警报中

Content not showing up in dynamic boostrap alert

jquery

alert

dynamic

insertafter

twitter-bootstrap-3