Not calling click event

Question

I have kind of strange problem.

I'm trying to add a couple of 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")
});

You can see the relevant part of the DOM here (self is the span user-name): enter image description here

Later on, the element eventually because visible and I can click on it. However, the event handler is never called. If I remove the blur event, than the click event works. However, I need both.

What's going on here? How can I fix it?

Try `$self.closest(".user-name").on("click", ".icon-ok", function() { console.log("icon.ok") });` — falsarella, Jun 15 '15 at 21:12
Properly (and just a guess) that one of these events requires a `return true;` to continue onto other event types. — Reactgular, Jun 15 '15 at 21:13

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

Looks like the blur cancels out the click (due to event order) but using mousedown instead of blur may help you get both.

UPDATE: Added code based on comment

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

edited May 23 '17 at 12:13

Community

1
1

answered Jun 15 '15 at 21:22

Arthur Frankel

4,695
6
35
56

Maybe I mis-understand your question, but use it instead of the click. $self.parent().find(".icon-ok").on("mousedown", function() { console.log("icon.ok") }); Your "click" will then trigger before your blur. – Arthur Frankel Jun 15 '15 at 21:55
Ah, mousedown instead of click worked! Simple and great solution. – Aleks Jun 15 '15 at 22:32

score 0 · Answer 2 · answered Jun 15 '15 at 21:20

0

Your problem might be the classic delegation problem, where in the element is not available in the DOM when the event is bound.

Delegate the event and see if that solves your problem.

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

User $self if that element is visible or any closest ancestor that you can find which is always present in the DOM.

answered Jun 15 '15 at 21:20

Sushanth --

55,259
9
66
105

.icon-ok" actually is in the DOM when the event is set up, that's not the problem. I tried your suggestion just in case and it does not work. – Aleks Jun 15 '15 at 21:41

Not calling click event

2 Answers2