單擊按鈕後顯示警報

我有一個按鈕，單擊後會彈出警報「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

單擊按鈕後顯示警報

回答

相關問題