Question

In my heavy-ajax code, i always bind “click” the body tag & act depending on $(e.target) & using $.fn.hasClass(). However when i click on an anchor that has a </span> tag inside, my $(e.target) equals this node, and not the parent anchor as i would like it to.

From now on, i have used this trick (var $t = $(e.target);) :

/** bubbling **/
if($t.get(0).tagName !== "A" && $t.get(0).tagName !== "AREA") {
    $t = $t.parent("a");
   if(empty($t)) return true;
   //else console.log("$t.bubble()", $t);
}

It feels wrong somehow… Do you have any better implementation ?

---

$.fn.live() does not solve my issue as it still returns the span as the target. Moreover i’m looking for speed (running on atom-based touch devices) & live appeared to be way slower (twice) : http://jsperf.com/bind-vs-click/3

---

In fact, as @Guffa pointed, using $.fn.live() solves the span bubbling issue as i don’t need the event.target anymore. I guess there is no other “right” answer here (using bind on a container).

Answer 1

Why not use the live method that does it for you?

$('a.someclass').live('click', function(){
  // do something
});

The live method binds to the body element and checks the event target against the selector.

jQuery: live