不调用点击事件

Question

我有一个奇怪的问题。

我正在尝试向 som DOM 元素添加几个事件（所有现有的，一些最初隐藏的：

$self.on("focus", function () {
    $self.next().css("display", "inline-block");
});

$self.on("blur", function () {
    $(this).next().hide();
});

$self.parent().find(".icon-ok").on("click", function() {
    console.log("icon.ok")
});

你可以在这里看到 DOM 的相关部分（self 是 span 用户名）：

稍后，该元素最终因为可见而我可以点击它。但是，永远不会调用事件处理程序。如果我删除了 blur 事件，那么 click 事件就会起作用。但是，我两者都需要。

这里发生了什么？ 我该如何解决？

Answer 1

Looks like 模糊会取消点击（由于事件顺序），但使用 mousedown 代替模糊可能会帮助您同时获得两者。

更新：根据评论添加代码

$self.parent().find(".icon-ok").on("mousedown", function() {
  console.log("icon.ok") 
}); 

Answer 2

您的问题可能是经典的委托问题，即当绑定事件时元素在 DOM 中不可用。

委托活动，看看是否能解决您的问题。

$self.on("click", ".icon-ok", function() {
    console.log("icon.ok")
});

用户$self，如果该元素是可见的，或者您可以找到的任何最近的祖先始终存在于 DOM 中。