Trying to attach a click event to a dynamically created image to trigger a modal to close

Question

I've got a bit of code (full disclosure - not 100% my own code) that works to open and close a modal dialog box but when I try to attach a click event to several images it doesn't seem to work.

Here's the relevant working code:

 var modal = (function(){
    var 
    method = {},
    $overlay,
    $modal,
    $content,
    $close;

    $overlay = $('<div id="overlay"></div>');
    $modal = $('<div id="modal"></div>');
    $content = $('<div id="modalcontent"></div>');
    $close = $('<a id="modalclose" href="#">close</a>');

    $modal.hide();
    $overlay.hide();
    $modal.append($content, $close);

    $(document).ready(function(){
       $('body').append($overlay, $modal);
    });

   // Center the modal in the viewport
    method.center = function () {
        var top, left;    
        top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
        left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
        $modal.css({
        top:top + $(window).scrollTop(), 
        left:left + $(window).scrollLeft()
    });
};

// Open the modal
method.open = function (settings) {
    $content.empty().append(settings.content);

    $modal.css({
        width: settings.width || 'auto', 
        height: settings.height || 'auto'
    })

    method.center();

    $(window).bind('resize.modal', method.center);

    $modal.show();
    $overlay.show();
};

// Close the modal
method.close = function () {
    $modal.hide();
    $overlay.hide();
    $content.empty();
    $(window).unbind('resize.modal');
};

$close.click(function(e){
    e.preventDefault();
    method.close();
});

    return method;
  }());

This code gets called as part of this:

          $('#snaptarget .tile').doubletap(
              /** doubletap-dblclick callback */
              function(event){
                  $.get('logic/get_swatches.php?id='+newID, function(data){
                      modal.open({content: data});
                  });
              },
              /** doubletap-dblclick delay (default is 500 ms) */
              400
          );

...which works to open up the modal with a selection of fabric swatches (with code that matches a swatch to a frame on click).

The existing code creates a small button in the top-right of the dialog that can be clicked to close the dialog but I want it to close automatically upon a user clicking (i.e. selecting) any fabric swatch.

I've already tried using several variations of this:

$('.swatchAsCloseButton').on ('click', function(e){
    method.close();
});

and

$('.swatchAsCloseButton').click(function(e){
     method.close();
);

but none seem to work at all. I'm entirely self-taught and mostly a PHP person - I'm sure that I'm missing something very basic but I can't find it and all the search results seem to be simple stuff that are solved with $('.class').on() and $('.class").click().

*****edit: working now. Because the #modal div and all contents are dynamically generated I had to go all the way back to the body element as the static element. My mistake was in thinking that the 'parent' element could work in place of the 'static' element given in the solutions I was finding while searching. Here's the change I made that worked:

$.get('logic/get_swatches.php?id='+newID, function(data){
                      modal.open({content: data});
                      $('body').on ('click', '#modal #modalcontent .swatchAsCloseButton', function(e){
    modal.close();});

score 1 · Accepted Answer · edited May 23 '17 at 12:17

1

If you are creating a any element on the fly you should either rebind the event or you should use event-delegation in jquery

Duplicate Event binding on dynamically created elements?

Try to call unbind and bind the event

$('.swatchAsCloseButton').unbind('click');
$('.swatchAsCloseButton').click(function(e){
    method.close();
);

edited May 23 '17 at 12:17

Community

1
1

answered Jun 22 '15 at 18:08

Dickens A S

3,824
2
22
45

Thanks for taking a moment to reply but that doesn't work. I took another look at that answer, thinking that I may have missed something, and then switched the selector to $('#modalcontent img') instead of using the class for the .on and .click functions - still isn't working. – Eric Brockway Jun 22 '15 at 18:16
call unbind before you specify the event – Dickens A S Jun 22 '15 at 18:20
1

Got it to work. I needed to back up to the body element for the 'static' element instead of using '#modal'. I also had to put it into the function that works with the ajax callback data instead of it's own function. I've edited my question to put in the code that works. Thanks, Zigma Empire ! – Eric Brockway Jun 22 '15 at 18:56

Trying to attach a click event to a dynamically created image to trigger a modal to close

1 Answers1