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

但似乎没有任何工作。我完全是自学成才，而且大多数是一个PHP人员 - 我确信我缺少一些非常基本的东西，但我找不到它，所有的搜索结果似乎都是用$（'解决的简单东西。 class'）。on（）和$（'。class“）。click（）。

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

$.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

如果您正在动态创建任何元素，您应该重新绑定事件，或者您应该在jquery中使用事件委派

重复Event binding on dynamically created elements?

尝试调用unbind并绑定事件

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

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

1 个答案: