13

I've added a click event as follows and would like to check if the target has a specific parent.

$(document).click(function(event){
    // Check here if target has specific parent for example -> #parent
});

How can this be done?

4
  • 1
    You want to check if the document has a parent element? And why are you binding click to the document? What exactly are you trying to do
    – wirey00
    Aug 30, 2012 at 15:23
  • Do you mean "parent" or "ancestor"?
    – Pointy
    Aug 30, 2012 at 15:24
  • I've got a date-picker which should be hidden after you clicked somewhere else.
    – ihkawiss
    Aug 30, 2012 at 15:25
  • Isn't the event's this the literal DOM element (not jquery obj)? $(document).click(function(event){ console.log( $(this.parentNode) ); }); Mar 31, 2014 at 15:45

4 Answers 4

23

There's a .parent() dom traversal method for this.

according to Pointy's crystal ball, you probably want to do something like this:

$(document).click(function(event) {
  if ($(event.target).parents('.selector').length > 0) {
  }
});

I'm not sure why are you set click handler on document, maybe looking for event delegation and the .on()?

3
  • 5
    I think you'd want either .parents(selector) or .closest(selector), and then check to see if the length of the jQuery object is > 0. edit oh unless the question is about the direct parent, then yes.
    – Pointy
    Aug 30, 2012 at 15:24
  • @Pointy Yes. Use $(event.target).parents(selector).length.
    – adu
    Aug 30, 2012 at 15:28
  • Works perfect with $(event.target).parents(selector).length. Was exactly what I was looking for! Tanks a lot!
    – ihkawiss
    Aug 30, 2012 at 15:45
5

I believe this also works.. AFAIK jQuery events use the the literal element instead of a jQuery object when calling events. Basically this should be your normal DOM element with normal JavaScript properties.

$(document).click(function(event)
{
   let myparent = $(this.parentNode); //jquery obj
   let parent = $(this.parentNode)[0]; //plain DOM obj

   let myself = $(this); //jquery obj;
   let $elf = this; //plain DOM obj
});

Note: sometimes using 'self' as a variable is bad/causes conflicts with certain libraries so i used $elf. The $ in $elf is not special; not a jQuery convention or anything like that.

3
$(document).click(function(event){
    var $parent = $(this).parent();

     // test parent examples 
    if($parent.hasClass('someclass')) { // do something }

    if($parent.prop('id') == 'someid')) { // do something }

    // or checking if this is a decendant of any parent

    var $closest = $(this).closest('someclass');

    if($closest.length > 0 ) { // do something }

    $closest = $(this).closest('#someid'); 

    if($closest.length > 0 ) { // do something }
});
2
  • I think you can also pass a selector to .parent(), which would give you a jQuery result with either zero or one element in it..
    – Pointy
    Aug 30, 2012 at 15:29
  • You're definitely right you can, I was just trying to give some options and yes that's another one
    – Gabe
    Aug 30, 2012 at 15:31
2

I have reliably used this in the past:

var target = $( event.target )

This will give you a reference to the jQuery object for the element that had the event invoked. You could use this same approach and see if the parent is "#parent", something like this:

var target = $( event.target )
if (target.parent().attr('id') == "#parent") {
    //do something
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.