selector using variable

Question

Usually when I want to check if any child element inside a parent element was clicked I use something like this:

$(document).click(function (e) {
    alert($(e.target).is("#somediv *"));
}

But now I have the somediv in a variable. I have tried:

var somediv = $(this);
$(document).click(function (e) {
    alert($(e.target).is($(somediv, "*")));
}

But it doesn't work. How can I do that? Is it the best way to detect if a element or any child element was clicked?

It is an interesting question.. If you had a title as **'Check if an element belongs to a specific parent'** or something like that — Selvakumar Arumugam, Sep 28 '12 at 16:12

Felix Kling · Accepted Answer · 2012-09-28T16:10:41.437

5

No matter whether somediv is a DOM element or a selector, use .closest ^[docs]:

if ($(e.target).closest(somediv).length > 0)

This will traverse the DOM up, starting at e.target and tests whether any ancestor (or the element itself) is somediv. If you want to exclude e.target, start at its parent:

$(e.target).parent().closest(somediv)

Another way, depending on the overall context, could be to simply bind the event handler to somediv:

somediv.click(function() {
   // click originated from inside the div
});

There is no easy way to create a selector from an existing DOM element. If somediv was containing a selector then you could use string concatenation to combine it:

$(e.target).is(somediv + ' *');

edited Sep 28 '12 at 16:10

answered Sep 28 '12 at 15:50

Felix Kling

795,719
175
1,089
1,143

Does it work http://jsfiddle.net/GUAFW/1/? Is the fiddle different from what is in OP? – Selvakumar Arumugam Sep 28 '12 at 16:08
FelixKling I tested and understood you code. It works. Nice one. I just need to close a div if any other element outside the div is clicked, so somediv.click it is not the solution. – lolol Sep 28 '12 at 16:17
Why haven't you asked this then? ;) There are already quite a few questions targeting this, for example: http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element. – Felix Kling Sep 28 '12 at 17:55

Selvakumar Arumugam · Answer 2 · 2012-09-28T16:09:57.970

1

Try below,

DEMO: http://jsfiddle.net/GUAFW/2/

$(function () {
    var somediv = $('#container');
    $(document).click(function (e) {
        alert($(e.target).parent().is(somediv));
        //                   ^__ Just immediate childrens :(
    });
});

You can do e.target != this inside the handler to check if it is the parent or from child element.

An Example:

HTML:

<div id="container">
   <div class="child"></div><div class="child">
</div>

JS:

$(function () {
    $('#container').click(function (e) {
        alert(e.target != this);
    });
});

edited Sep 28 '12 at 16:09

answered Sep 28 '12 at 15:55

Selvakumar Arumugam

79,297
15
120
134

I can't see how it applies because what I want to know is: any given click is happening inside a div or any of the div childs or not. – lolol Sep 28 '12 at 16:01
@lolol Yea, it was a misunderstanding from my side.. I realized that after looking at Felix answer. – Selvakumar Arumugam Sep 28 '12 at 16:03
@FelixKling May be saving the best for the last :P – Selvakumar Arumugam Sep 28 '12 at 16:03
I just feel left out, I want comments on my answer too :D – Felix Kling Sep 28 '12 at 16:04
I'm getting there! Your awnser is different, I need to do some follow up to understand it. =p – lolol Sep 28 '12 at 16:05
@Vega thank you for your help, but Felix code works nicely to my context and I don't need to do any extra checks. – lolol Sep 28 '12 at 16:13

score 0 · Answer 3 · answered Sep 28 '12 at 15:48

0

Assuming someDiv has the string literal identifier of the element, it won't be prefixed with #, so:

$(document).click(function (e) {
  if ($(e.target).is("#" + somediv + " *")) {
    // some code
  } 
}

answered Sep 28 '12 at 15:48

Grant Thomas

44,454
10
85
129

my bad, somediv is a dom element. – lolol Sep 28 '12 at 15:53

Sushanth -- · Answer 4 · 2012-09-28T16:10:05.200

0

Try this approach.. Instead of .is() try using equality selector..

<div  class="hide"> 
    <span class="green" id="somediv"> YOOO </span>
</div>

$('div').click(function(e) {
    if (e.target != this) {
        alert(((e.target.id) == 'somediv'));
    }
});

CHECK FIDDLE

edited Sep 28 '12 at 16:10

answered Sep 28 '12 at 15:49

Sushanth --

55,259
9
66
105

It doesn't solve my problem. It's a plugin and I have somediv on this. – lolol Sep 28 '12 at 15:55
I don't know the id. It's a plugin, I have to work with $(this). – lolol Sep 28 '12 at 15:57
In any case, did would check whether `e.target` is the element itself, not one of its descendants. – Felix Kling Sep 28 '12 at 15:59
@sushanthreddy it was there to show that somediv is a dom element. now it's fixed. my bad again. =\ – lolol Sep 28 '12 at 16:04

selector using variable

4 Answers4