Question

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

我希望它显示closeButton png 图像，然后当用户再次点击它时它会消失。为了测试按钮功能是响应我已经在功能中添加警报。

点击初始按钮有效，该功能会找到相应的ID，生成alert("jQuery Worked")行并调出closeButton图片。

然而，当我点击关闭按钮时没有任何反应（我们希望alert("hiii")可以正常工作，但事实并非如此。我已经在线查看，发现我的代码需要在{{1}它的功能但它不起作用。我也尝试使用图像的ID来使$(document).ready(function() {}图像消失，但这也不起作用。所以我尝试使用{{1我认为有用的变量应该有效但不能。为什么？

.js文件

closeButton

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

JSFIDDLE

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

3 个答案: