.click（）jQuery函數適用於一個ID，但不可變

Question

我的代碼在我的js文件中，基本上我想測試的是，如果用戶點擊某個按鈕（其ID爲admin ）。

我想調出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"); 
    }); 
} 
}); 

JSFIDDLE