Closed
Description
Alerts added to the document using DOM operations in JS cannot be dismissed. A testcase is attached below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div id="user-messages" class="container col-sm-12">
<!-- <div class="alert alert-danger fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
{message 1}
</div> -->
</div>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/1.0.2/bootstrap-native.min.js"></script>
<script type="text/javascript">
function showMessage (html_msg) {
var a = document.createElement("div");
a.classList.add("alert", "alert-danger", "fade", "in");
a.innerHTML = '<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>';
a.innerHTML += html_msg;
var x = document.getElementById("user-messages");
x.appendChild(a);
}
showMessage("{message 2}");
</script>
</body>
</html>
In addition, and quite strangely in fact, if you remove the commented out section in the above testcase, the alerts can be dismissed for the user-messages div (but not for any other div).