I've implemented a dismissible alert in my HTML file that starts off hidden. Here's the code snippet:
<div class="alert alert-dismissible" role="alert" id="msgdiv" style="margin-bottom:5px;display: none;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<span id="emsg"></span>
</div>
Whenever I make an Ajax request to submit the form, I reveal this previously hidden div based on the response. Subsequently, I add either a success or error class to this div.
console.log($("#msgdiv"));
$("#msgdiv").show();
if (result.is_success) {
$("#msgdiv").removeClass("alert-warning");
$("#msgdiv").addClass("rlt-success");
} else {
$("#msgdiv").removeClass("alert-success");
$("#msgdiv").addClass("rlt-warning");
}
$("#emsg").html(result.message);
Upon receiving the response for the first time, the div is displayed. By clicking the cross button, the div can be dismissed. However, when I submit the form with new values using Ajax for the second time without refreshing the page, the div is not displayed. Strangely, the same result is returned on both occasions. I checked the console log output of the div element in both scenarios and here are the findings:
First Time:
[div#msgdiv.alert.alert-dismissible, context: document, selector: "#msgdiv"]
Second Time:
n.fn.init {context: document, selector: "#msgdiv"}
For further details, refer to the image below.
https://i.sstatic.net/k5dEX.png
Why is this discrepancy happening? What does the difference in console logs signify from both HTML and JS perspectives?