Do not trigger click event

Question

I have a strange problem.

I am trying to add several events to som DOM elements (all existing, some initially hidden:

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

Here you can see the corresponding part of the DOM (self is the span username):

Later, the element is ultimately because it is visible, and I can click on it. However, the event handler is never called. If I delete the blur event, then the click event fires. However, I need both.

What's going on here? How can i fix this?

Answer 1

It looks like blurring cancels the click (due to event ordering), but using mousedown instead of blurring can help you get both.

UPDATE : comment based code added

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