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

我的js文件中有这段代码，基本上我想测试的是，如果用户单击某个按钮（ID为admin）

我想让它显示一个

closeButton

，它是png图像，当用户再次单击它时，它应该消失。为了测试按钮功能是否响应，我在功能中添加了警报

单击初始按钮，函数会找到相应的ID，发出

警报（“jQuery已工作”）

行，并显示

关闭按钮

图像

但是，当我单击关闭按钮时，什么也没有发生（我们希望

警报（“hiii”）

可以正常工作，但它不能正常工作。我在网上查找，发现我的代码需要在

$（文档）中。ready（function（）{}

函数，但它不起作用。我还尝试使用图像的ID使

closeButton

图像消失，但也不起作用。因此我尝试使用

$closeButton

变量，我认为该变量对usre应该起作用，但不起作用。为什么

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

var$closeButton=$（“”）；
$（“正文”）。追加（$overlay）；
$overlay.append（$closeButton）；
警报（“jQuery已工作”）；
});
$closeButton.单击（函数（）{
警报（“hiiii”）；
});
});

您正在寻找事件委派

事件委派是指使用事件传播的过程 （冒泡）在DOM中比 事件发生的元素。它允许我们附加一个 现在或将来存在的元素的事件侦听器。在…内 事件处理功能

---

您正在寻找活动代表团

事件委派是指使用事件传播的过程 （冒泡）在DOM中比 事件发生的元素。它允许我们附加一个 现在或将来存在的元素的事件侦听器。在…内 事件处理功能

这样做：

$(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');
    });
});

$（文档）.ready（函数（）{
$（“#管理员”）。单击（函数（事件）{
var$overlay=$（“”）；
变量$closeButton=$（“”）；
$（“正文”）。追加（$overlay）；
$overlay.append（$closeButton）；
警报（“jQuery已工作”）；
});
$（文档）。在（'click'，'#closeButtonID'，函数（）上{
警报（“hi”）；
});
});

执行以下操作：

$(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');
    });
});

$（文档）.ready（函数（）{
$（“#管理员”）。单击（函数（事件）{
var$overlay=$（“”）；
变量$closeButton=$（“”）；
$（“正文”）。追加（$overlay）；
$overlay.append（$closeButton）；
警报（“jQuery已工作”）；
});
$（文档）。在（'click'，'#closeButtonID'，函数（）上{
警报（“hi”）；
});
});

这不是一个好方法，但它是一种解决问题的不同方法，希望它能帮助您：

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

var$closeButton=$（“”）；
$（“正文”）。追加（$overlay）；
$overlay.append（$closeButton）；
警报（“jQuery已工作”）；
close（）；
});
函数关闭（）{
$（'#closeButtonID'）。单击（函数（）{
警报（“hiiii”）；
});
}
});

---

这不是一个好方法，但它是解决问题的另一种方法，希望它能帮助您：

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

var$closeButton=$（“”）；
$（“正文”）。追加（$overlay）；
$overlay.append（$closeButton）；
警报（“jQuery已工作”）；
close（）；
});
函数关闭（）{
$（'#closeButtonID'）。单击（函数（）{
警报（“hiiii”）；
});
}
});

---

在文档准备就绪之前填写变量。它很可能是空的，因此不包含任何元素。请尝试放置var$closeButton=$（“”）；在$（doucment）.ready函数内。第二次尝试填充它时，它位于处理程序函数内，因此位于该函数范围内。该值不存在于该函数之外。请在文档准备就绪之前填充变量。它很可能是空的，因此不包含任何元素。请尝试放置var$closeButton=$（“”）；在$（doucment）.ready函数内。第二次尝试填充它时，它位于处理程序函数内，因此位于该函数范围内。该值不存在于该函数之外。这将更改任何内容，因为

$closeButton。单击
仍将注册对
$（“”）
创建的元素的回调，并且该元素从未添加到DOM中。OP需要使用事件委派，或者移动
$close按钮。单击
$（“#admin”）中的（函数（）{
）。单击（函数（事件）{
您应该在
$closeButton
前面添加
变量
，因为否则全局作用域会受到不必要的污染。除此之外，还要解释您更改的内容以及为什么应该使用
而不是
执行此操作：
。这会更改任何内容，因为
$closeButton。单击
仍会注册调用由
$（“”）
创建的元素，此元素从未添加到DOM中。OP需要使用事件委派，或移动
$closeButton。单击
$（“#admin”）中的（函数（）{
）。单击（函数（事件）{
您应该在
$closeButton
前面添加
var
，因为否则全局范围会受到不必要的污染。除此之外，还要解释您更改的内容以及为什么应该使用
而不是
来执行此操作：
。这应该如何解决问题呢？
closeButton
中的
$closeButton
nction保留了
$（“”）
，所以问题也会一样。在我写第一条评论时，你的答案是
$closeButton。单击
，而不是
$（“#closeButtonID”）。单击
。在我写了我的评论后，你将答案更改为
$（“#closeButtonID”）。单击
确实可以。我犯了一个小错误，现在编辑。这应该如何解决问题？
关闭
中的
$close按钮