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?
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 + ' *');
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);
});
});
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
}
}
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'));
}
});
e.target is the element itself, not one of its descendants.