How to cancel jQuery effect by clicking anywhere?

Question

So I have this code:

$(document).click(function(e){
  $(".label").removeClass("active");
});

$(".input-combo").click(function(e){
  e.stopPropagation();

  var $this = $(this),
      label = $this.find(".label");

  $(".label").removeClass("active");
  label.addClass("active");
});

And apart from the $(document) click part it works ok, but with the document part the first click event cancels out the $(".input-combo") click event. How could I prevent this?

In your document click handler, check what the _target_ of the click event was first. — CBroe, Oct 24 '16 at 11:08

score 1 · Answer 1 · answered Oct 24 '16 at 11:11

Following Code should work:

$(document:not(.input-combo)).click(function(e){
  $(".label").removeClass("active");
});

$(".input-combo").click(function(e){
  e.preventDefault();

  var $this = $(this),
      label = $this.find(".label");

  $(".label").removeClass("active");
  label.addClass("active");
});

score 0 · Answer 2 · answered Oct 24 '16 at 11:09

0

Use .not() selector in which you will exclude all the functions you don't want to remove.

answered Oct 24 '16 at 11:09

DaX

94
11

How to cancel jQuery effect by clicking anywhere?

2 Answers2