jQuery函数.click（）适用于一个ID，但不适用

Question

I have this code in my js file and basically what I want to test out is, if the user clicks on a certain button (which has ID of admin).

I want it to bring up a closeButton which is png image and then when the user clicks this again it should disappear. To test of the button functions are responsive I have put alerts in the functions.

Clicking on the initial button works, the function finds the corresponding ID, makes the alert("jQuery Worked") line and brings up the closeButton image.

However when I click on the close button nothing happens (we expect here that the alert("hiii") would work but it doesn't. I have looked online and found that my code needed to be in a $(document).ready(function() {} function which it is but it isn't working. I also tried to use the ID of the image to make the closeButton image disappear but that didn't work either. So I have tried just using the $closeButton variable which I thought for usre should work but doesn't. Why?

.js file

var $closeButton = $("<img>");
$(document).ready(function() {
    $("#admin").click(function (event) {
        var $overlay = $("<div id='overlay'> </div>");
        var $closeButton = $("<img class='classMe' id='closeButtonID' src='https://s23.postimg.org/ouup1ib6z/close_button.png'></img>");
        $("body").append($overlay);
        $overlay.append($closeButton);  

        alert("jQuery worked");
    });

    $closeButton.click(function() {
        alert("hiiii");
    });
});

Answer 1

you looking for Event delegation.

Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future. Inside the Event Handling Function.

$(document).on('click', '#closeButtonID', function() {
     alert('hiii');
});

Answer 2

Do this:

$(document).ready(function() {

    $("#admin").click(function (event) {
      var $overlay = $("<div id='overlay'></div>");
      var $closeButton = $("<img id='closeButtonID' src='https://s23.postimg.org/ouup1ib6z/close_button.png'></img>");
      $("body").append($overlay);
      $overlay.append($closeButton);  

      alert("jQuery worked");
    });

    $(document).on('click', '#closeButtonID', function() {
      alert('hi');
    });
});

Answer 3

Not a good way to do this but it's a different way to solve the problem , Hope it will help you :

var $closeButton = $("<img>");
$(document).ready(function() {
    $("#admin").click(function (event) {
        var $overlay = $("<div id='overlay'> </div>");
        var $closeButton = $("<img class='classMe' id='closeButtonID' src='https://s23.postimg.org/ouup1ib6z/close_button.png'></img>");
        $("body").append($overlay);
        $overlay.append($closeButton);  

        alert("jQuery worked");
   close();
    });
  function close(){
    $('#closeButtonID').click(function() {
        alert("hiiii");
    });
}
});

JSFIDDLE