单击按钮后显示警报

我有一个按钮，单击后会弹出警报“Hello”。它对第一次点击正常工作，但在关闭警报并再次单击该按钮后，警报未显示。请帮忙。单击按钮后显示警报

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" 
 
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script 
 
\t src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script 
 
\t src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style> 
 
.hidden { 
 
\t display: none; 
 
} 
 
</style> 
 
<title>Show Alert</title> 
 
</head> 
 

 
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
 
\t <div class="container"> 
 

 
\t \t <div class="row"> 
 
\t \t \t <div class="alert alert-success hidden" id="success-alert"> 
 
\t \t \t \t <button type="button" class="close" data-dismiss="alert">x</button> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> Hello 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="row"> 
 
\t \t \t <button id="btn" type="button" class="btn btn-default">Open 
 
\t \t \t \t Alert</button> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <script type="text/javascript"> 
 
\t \t $(document).ready(function() { 
 
\t \t \t $("#btn").click(function() { 
 
\t \t \t \t $('#success-alert').removeClass('hidden'); 
 
\t \t \t }); 
 

 
\t \t }); 
 
\t </script> 
 
</body> 
 

 
</html>

来源

2016-12-25 Test Account

警报框过得去引导去除。那就是问题所在。 –

你应该添加隐藏课时提醒框关闭agian！ – farhadamjady

你hidden类应该回来，但不是由于data-dismiss。从关闭按钮中删除data-dismiss并附加一个点击事件，点击事件会返回hidden类。这是工作代码。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" 
 
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script 
 
\t src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script 
 
\t src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style> 
 
.hidden { 
 
\t display: none; 
 
} 
 
</style> 
 
<title>Show Alert</title> 
 
</head> 
 

 
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
 
\t <div class="container"> 
 

 
\t \t <div class="row"> 
 
\t \t \t <div class="alert alert-success hidden" id="success-alert"> 
 
\t \t \t \t <button type="button" class="close">x</button> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> Hello 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="row"> 
 
\t \t \t <button id="btn" type="button" class="btn btn-default">Open 
 
\t \t \t \t Alert</button> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <script type="text/javascript"> 
 
\t \t $(document).ready(function() { 
 
\t \t \t $("#btn").click(function() { 
 
\t \t \t \t $('#success-alert').removeClass('hidden'); 
 
\t \t \t }); 
 
      $("button.close").click(function() { 
 
\t \t \t \t $('#success-alert').addClass('hidden'); 
 
\t \t \t }); 
 

 
\t \t }); 
 
\t </script> 
 
</body> 
 

 
</html>

来源

2016-12-25 08:00:48 ab29007

在堆栈溢出中，最好也指出问题。不只是粘贴代码。谢谢:) – M98

谢谢你。我也包括了导致问题的原因。 – ab29007

谢谢。我相信我们应该总是试图说明问题，这就是我们如何能够帮助人，否则我们只是提高复制粘贴技能:)谢谢 – M98

这是因为

完全数据驳回移除元件。删除此属性并绑定关闭按钮上的点击事件，您可以使用此事件隐藏警报。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" 
 
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script 
 
\t src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script 
 
\t src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style> 
 
.hidden { 
 
\t display: none; 
 
} 
 
</style> 
 
<title>Show Alert</title> 
 
</head> 
 

 
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> 
 
\t <div class="container"> 
 

 
\t \t <div class="row"> 
 
\t \t \t <div class="alert alert-success hidden" id="success-alert"> 
 
\t \t \t \t <button type="button" class="close" >x</button> 
 
\t \t \t \t <span class="glyphicon glyphicon-ok"></span> Hello 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t \t <div class="row"> 
 
\t \t \t <button id="btn" type="button" class="btn btn-default">Open 
 
\t \t \t \t Alert</button> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <script type="text/javascript"> 
 
\t \t $(document).ready(function() { 
 
\t \t \t $("#btn").click(function() { 
 
\t \t \t \t $('#success-alert').removeClass('hidden'); 
 
\t \t \t }); 
 
      
 
      $(".close").click(function() { 
 
\t \t \t \t $("#success-alert").addClass('hidden'); 
 
\t \t \t }); 
 
      
 

 
\t \t }); 
 
\t </script> 
 
</body> 
 

 
</html>

来源

2016-12-25 08:05:59 Deep

单击按钮后显示警报

回答

相关问题