I have a site with a simple little banner that's supposed to pop into an empty element only when a certain ajax call returns certain values.
I'm trying to include a bootstrap button in the banner that hides the whole div when clicked.
Probably because I'm inexperienced and don't know a better way, the code I have populating the div when the ajax data comes back uses jQuery's .html() method and just adds the markup for the button in the string.
So, after some digging, I think my issue is that my script for actually hiding the div is loaded when the DOM is first loaded, but the markup for the button is only added after the ajax call... so, after the DOM is loaded. But, I'm not certain, and I'm really not sure how to get around it.
Some code...
The empty div, which is just part of the initially-loaded html of the page:
<div id="bannerDiv"></div>
The relevant piece of the function that fires after the ajax call, filling the div and creating the close button:
$("#bannerDiv").html(" /*banner text*/ <button type='button' class='close' id='hidebanner'>×</button>");
The function that's supposed to hide the div when the button is clicked:
$("#hidebanner").click(function () {
$("#bannerDiv").hide();
});
Note (if it matters) that the ajax callback function and the .click are both inside a tag at the bottom of the page, and they're also wrapped in $(document).ready(function () {}.
Expected result: little bootstrap close button hides the div.
Actual result: nothing happens when the button is clicked - $("#hidebanner").click() is never even hit.
Any help much appreciated!