CODEWITHSUNDEEP
javascriptjquery
Aleks
Aleks

Reputation: 5854

Not calling click event

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?

Upvotes: 4

Views: 101

Answers (2)

Arthur Frankel
Arthur Frankel

Reputation: 4705

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

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55740

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.

Upvotes: 0

Related Questions