I received an HTML code (string) through an AJAX call. It contains dropdowns and other Bootstrap-related elements that work well when placed in a modal content like this:
$("#modal-form .modal-content").html(html_string);
However, when I try to include it as content in a dynamically created window using L.DomUtil.create('div',..), it doesn't work properly. For instance, the dropdown does not toggle. It appears that Bootstrap is not evaluating this HTML.
Here's the HTML structure:
<div class="modal fade autoclean" id="modal-form">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
The following code works fine:
$.ajax({
url: "http://...",
success: function (html_str) {
$("#modal-form .modal-content").html(html_str);
$("#modal-form").modal("show");
}
});
But this code snippet does not work as expected:
$.ajax({
url: "http://...",
success: function (html_str) {
var div = L.DomUtil.create('div', 'my-div', container);
div.innerHTML(html_str);
}
});
L.DomUtil is a utility method for creating DOM structures. ()