Is there a way to hide a using a button generated with jQuery's .html() method?

Question

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'>&times;</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!

Answer 1

You need to add the click listener in a different way, using $(document).on("click",...) you can specify listeners to dynamic added elements, in this case button#hidebanner.
.on() second parameter is the selector for which element will receive the listener specified on the first parameter ("click")

Also, inside the function you don't need to look for the banner using it's id, since the function context is the button, you can get the button parent and hide it.

Take a look, is that what you need?

function fakeAjaxCallback(){
  console.clear();
  console.log("ajax completed");
  $("#bannerDiv").html(" /*banner text*/ <button type='button' class='close' id='hidebanner'>&times;</button>");
}

$(document).on("click", "#hidebanner", function() {
  $(this).parent().hide();
    console.clear();
  console.log("banner hidden");
});

console.log("fake processing ajax...")
setTimeout(fakeAjaxCallback, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bannerDiv"></div>

Further read about .on(): https://api.jquery.com/on/