尝试将点击事件附加到动态创建的图像以触发模式关闭

Question

我有一些代码（完全披露 - 不是 100% 我自己的代码）可以打开和关闭模式对话框，但是当我尝试将点击事件附加到多个图像时它没有似乎工作。

这里是相关的工作代码：

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

此代码作为其一部分被调用：

          $('#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
          );

...这可以通过选择织物样本打开模态（使用代码将样本与单击的框架相匹配）。

现有代码在对话框的右上角创建了一个小按钮，可以单击该按钮关闭对话框，但我希望它在用户单击（即选择）任何织物样本时自动关闭。

我已经尝试使用它的几种变体：

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

和

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

但 none 似乎完全有效。我完全是自学成才，主要是 PHP 人 - 我确信我遗漏了一些非常基本的东西，但我找不到它，所有搜索结果似乎都是简单的东西，可以用$('.class').on() 和 $('.class").click()。

*****编辑：正在工作。因为#modal div 和所有内容都是动态生成的，所以我不得不一直回到 body 元素作为静态元素。我的错误是认为 'parent' 元素可以代替我在搜索时找到的解决方案中给出的 'static' 元素。这是我所做的有效更改：

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

Answer 1

如果您正在动态创建一个 any 元素，您应该重新绑定该事件，或者您应该在 jquery

中使用事件委托

重复Event binding on dynamically created elements?

尝试调用解除绑定和绑定事件

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

尝试将点击事件附加到动态创建的图像以触发模式关闭

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

javascript

jquery

onclick

modal-dialog

jquery-click-event