Question

我有一个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

Answer 1

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

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

true

请参阅docs

Answer 2

你应该尝试：

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

Answer 3

此代码

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

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

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

$(document).on('#dialog .ok', 'click', function () {
  // Your click handler here
});

Answer 4

您正在按钮上设置.on。它应该在父级上，以便它可以在它冒泡时捕获它。尝试：

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

Answer 5

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

Answer 6

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

<强> DEMO

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

jQuery代码没有触发

6 个答案: