.click() jQuery函数适用于一个ID，但不适用于变量

Question

我的js文件中有这段代码，基本上我想测试的是，如果用户单击某个按钮(具有管理员ID)。

我希望它调出一个closeButton是png图像，然后当用户再次单击它时，它应该消失。为了测试按钮功能是否响应，我在函数中放置了警报。

单击初始按钮即可，该函数找到相应的 ID，制作alert("jQuery Worked")行并调出closeButton图像。

但是，当我单击关闭按钮时，没有任何反应(我们希望alert("hiii")在这里起作用，但它没有。我在网上查看并发现我的代码需要位于一个$(document).ready(function() {}函数中，但它不起作用。我还尝试使用图像的ID使closeButton图像消失，但这也没有用。所以我尝试只使用$closeButton变量，我认为它应该有效，但没有。为什么？

.js文件

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

您正在寻找事件委派。

事件

委托是指使用事件传播的过程 (冒泡)在 DOM 中处理比 元素，事件源自其中。它允许我们附加一个 现在或将来存在的元素的事件侦听器。里面 事件处理函数。

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

Answer 2

这样做：

$(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

这不是一个好方法，但这是解决问题的不同方法，希望对您有所帮助：

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");
});
}
});

吉斯菲德尔