Question

I’m trying to create a button that will hide a div that it is contained in. The contents of this div (including the button) will most likely be destroyed and recreated several times while the page is being viewed, so I’ve been advised to use “event delegation” to target the button, as having a function actually called at the button itself fails after it’s been destroyed and recreated.

The syntax it was suggested I use is as follows:

$('#container').on('click', '#button', function() {
  $('#div').fadeOut();
});

This isn’t working, for some reason. I’ve created this jsfiddle, wherein it isn’t working either. What am I doing wrong? Thanks!

EDIT: Okay, apparently I’m dumb and wasn’t using jsfiddle right. Once I configured it to use jQuery, it works fine, but this method isn’t working in my actual code.

HTML:

<div class="cycle-slideshow" id="slideshow">
  <div class="cycle-overlay custom" id="info">
    <img src="close_pane.png" class="fadein close_pane button">
  </div>
</div>

jQuery:

$('#slideshow').on('click', '.close_button', function() {
  $('#info').fadeOut('slow');
});

This looks functionally the same to me, but isn’t working. Any idea why?

Answer 1

Looks like you do not have the element with class .close_pane in your HTML

$('#slideshow').on('click', '.close_button',

supposed to be

$('#slideshow').on('click', '.close_pane',