0

我有一个 jQuery 弹出对话框，顶部有一个关闭链接。出于某种原因，这里从未调用过代码：我在调试器中看过。

我认为这很简单，因为开放代码可以正常工作。

javascript代码是：

$(document).ready(function(){
  $('#dialogOpen').click(function() {
    console.log("link clicked");
    openDialog('#dialog');
  });

$('#dialog').find('.ok')
  .on('click', function() {
    console.log("ok clicked");
    closeDialog(this);
  })
});

function openDialog(selector) {
  $(selector)
    .clone()
    .appendTo('#overlay')
    .show()
    .parent()
    .fadeIn('fast');
  }

function closeDialog(selector) {
  $(selector)
    .parents('#overlay')
    .fadeOut('fast', function() {
       $(this)
         .find('.dialog')
         .remove();
       });
}

html片段：

  <div id="dialog" class="dialog">
     <a href="#" class="ok">Close Dialog</a>
  <div>

完整代码在这里：https ://gist.github.com/sfcarroll/4739040

4

6 回答 6

2

由于其他人都在选择器而不是对象上应用事件，所以我认为我会以不同的方式处理它。

问题是您将事件添加到原始 html 中，但是当您clone使用 html 时，您不会将事件与它一起复制。添加一个true作为参数，你应该设置：

function openDialog(selector) {
  $(selector)
    .clone(true)
    .appendTo('#overlay')
    .show()
    .parent()
    .fadeIn('fast');
  }

查看文档

于 2013-02-08T13:55:17.640 回答
1

你应该试试 ：

$('body').on('click', '.dialog .ok', function() {
    console.log("ok clicked");
    closeDialog(this);
  })
});
于 2013-02-08T13:44:30.200 回答
1

这段代码

$('#dialog').find('.ok')
  .on('click', function() {
    console.log("ok clicked");
    closeDialog(this);
  })
});

将事件绑定到现有的 html 节点。它在你的 new#dialog创建之前被调用，因此这些 new#dialog没有在点击他们的.ok. 原因是它.clone不会克隆绑定在克隆元素上的事件。

使用委托句柄，如下所示：

$(document).on('#dialog .ok', 'click', function () {
  // Your click handler here
});
于 2013-02-08T13:45:31.860 回答
1

您正在按钮本身上设置 .on 。它应该在一个父节点上，这样它就可以在它冒泡时捕捉到点击它。尝试：

$(document).on('click', '#dialog .ok', function() {
    console.log("ok clicked");
    closeDialog(this);
  })
});
于 2013-02-08T13:46:00.893 回答
1

在您的 openDialog 函数中，您正在克隆对话框并因此创建它的新实例。之后您要么必须绑定到 click 事件，要么使用$('#dialog .ok').live('click', data, handler);将其绑定到新的 DOM 元素。

于 2013-02-08T13:46:01.193 回答
1 
$(document).ready(function(){
  $('#dialogOpen').click(function() {
    console.log("link clicked");
    openDialog('#dialog');
  });


});

function openDialog(selector) {
  $(selector)
    .clone()
    .appendTo('#overlay')
    .show()
    .parent()
    .fadeIn('fast');

    $('#dialog').find('.ok')
  .on('click', function() {
    console.log("ok clicked");
    closeDialog(this);
  });

}

function closeDialog(selector) {
  $(selector)
  .parents('#overlay')
  .fadeOut('fast', function() {
    $(this)
      .find('.dialog')
      .remove();
  });
}

演示

最初，您已将 .dialog 类应用于包含 CSS 的#dialog div，display:none因此最初 DOM 将没有您可以绑定事件的 div，因此它没有触发。

于 2013-02-08T13:51:49.857 回答