為什么事件無法在jquery中觸發？

Question

您能告訴我為什么在object selector時click事件沒有觸發嗎？ 這是我的代碼https://jsbin.com/seregezahe/1/edit?html,js，輸出

(function(){
  $(function(){
    var config ={
      btn:$('#btn'),
      hello:$('.hello'),
       bodyClickEvent: $("body"),
       overlayClick: $('.overlay'),
      closeBtnSelector: '#closeBtn',
    };
  config.btn.click(function(){
    $('#container').append($('#overlay').html())
    $('.popupdata').html('<div class="hello">xxxx</div><a href="javascript:void(0)"  id="closeBtn" >X Close</a></div>');


  })
  config.bodyClickEvent.on("click", config.closeBtnSelector, function () {

    //why it is not working
    config.overlayClick.fadeOut(500);
               config.overlayClick.remove();
    // below code is working fine
               //$('.overlay').fadeOut(500);
               //$('.overlay').remove();
            });

})
})()

為什么這兩條線不起作用

 config.overlayClick.fadeOut(500);
               config.overlayClick.remove();

當我運行我的代碼時，當我單擊button時，它會顯示一個button ， some html is show帶有關閉按鈕文本。當我單擊關閉按鈕時，它不會fadeout我的html並刪除。

Answer 1

更新dom后更新配置對象

config.btn.click(function(){
    $('#container').append($('#overlay').html())
    $('.popupdata').html('<div class="hello">xxxx</div>'+
                         '<a href=""  id="closeBtn" >X Close</a></div>');
    config.overlayClick= $('.overlay');
    config.closeBtnSelector = '#closeBtn'
    return false;
  })

Answer 2

問題是您在將元素添加到頁面之前正在選擇它們。 將選擇器添加到頁面后，需要填充它們。

....append(...);
....html(...);
config.overlayClick = $('.overlay'); 
...

或者您需要選擇項目而不是使用變量。

Answer 3

var config ={
  btn:$('#btn'),
  hello:$('.hello'),
  bodyClickEvent: $("body"),
  overlayClick: $('#overlay'),
  closeBtnSelector: '#closeBtn',
};

因為當您調用上面的$('#overlay')時元素#overlay不存在，所以$('#overlay')返回一個空列表。

下面的代碼應該工作：

var config ={
  btn:$('#btn'),
  hello:$('.hello'),
  bodyClickEvent: $("body"),
  overlayClickSelector: '#overlay',
  closeBtnSelector: '#closeBtn',
};

config.bodyClickEvent.on("click", config.closeBtnSelector, function () {         
  $(config.overlayClick).remove();
});