why event not fire in jquery?

Question

could you please tell me why click event is not firing when I am taking selector in object; here is my code https://jsbin.com/seregezahe/1/edit?html,js,output

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

})
})()

why these two line are not working

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

when I run my code it show a button when I click on button some html is show with close button text .When I click close button it is not fadeout my html and remove.

"Why these two line not working", "When I click close button it not fadeout my html and remove", "why event not fire in jquery". There are plenty of errors — Mark Skelton, Apr 09 '17 at 12:13
`$('.overlay')` doesn’t exist from the beginning. It’ll be an empty jQuery object. — Sebastian Simon, Apr 09 '17 at 12:18
@epascarello can I add selector in object when It is `overlay` data coming is DOM — user944513, Apr 09 '17 at 12:21
is it a correct way https://jsbin.com/cefocabiji/edit?html,js,output — user944513, Apr 09 '17 at 12:23

brk · Answer 1 · 2017-04-09T12:46:41.100

0

Update the config object after updating the 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;
  })

edited Apr 09 '17 at 12:46

answered Apr 09 '17 at 12:15

brk

48,835
10
56
78

There actually is a `
`, but it’s not in the DOM when `$('.overlay')` runs, thus it’ll be empty.
– Sebastian Simon Apr 09 '17 at 12:17

score 0 · Answer 2 · answered Apr 09 '17 at 12:24

The problem is your are selecting the elements before they are added to the page. You need to populate the selectors after you add them to the page.

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

or you need to select the items instead of using the variable.

score 0 · Accepted Answer · answered Apr 09 '17 at 12:26

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

Because the element #overlay is not exist when you call $('#overlay') above, so the $('#overlay') return an empty list.

The following code should work:

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

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

why event not fire in jquery?

3 Answers3