使用jQuery无法找到被单击元素的父元素的ID

Question

I want to get the id of the parent of element of the event on which the mousedown event was performed. I am using the following code:

$(document).on("mousedown",function(e) {  
    var id1 = $(e.target).closest("div").attr('id');
    console.log(id1);
});

The output of this is always undefinded . I tried this also:

$(document).on("mousedown",function(e) {  
    var id1 = $(e.target).closest("div");
    console.log(id1);
});

This is the output

[div.addmap, prevObject: x.fn.x.init[1], context: div.addmap]

What can I do to get the id attribute of the parent element? addmap is the id of the parent div .

Answer 1

The reason you cannot find a parent is, that you have bound the event-listener to the document itself. If you supply a second argument in the form of

$(document).on('mousedown', 'img', function(e){...})

You will bind the event listener to all <img> elements for example. Then clicking on an image will produce the desired result. Instead if 'img' you could also use 'img,p,span,div' which would bind the listener to all elements being of one if the types specified.

If you don't want to be specific you could of course also use '*' binding it to all elements of the document.

Answer 2

$(document).on("mousedown",function(e) {  
    var id1=$(e.target).parent().attr('id');
    console.log(id1);
});

Answer 3

As I'm assuming binding to the document is intentional in order to register clicks anywhere on the page and get the closest div, the following should do the trick:

I've taken onboard Jaromanda X's observation that you seem to be looking for a parent class rather than id ( context: div.addmap )

JSFiddle: http://jsfiddle.net/j86rn2mh/1/

jQuery

$(document).on("mousedown", function (e) {
var closestDiv = $(e.target).closest('div');
var closestDivClass = closestDiv.parent().attr('class');
console.log(closestDivClass);
});

HTML

<div class='addMap'>
<div id='targetDiv'>CLICK ME</div>
</div>

CSS

div.addMap {
height: 200px;
width:200px;
border-style: solid;
border-color: black;
}

div#targetDiv {
height: 100px;
width:100px;
border-style: solid;
border-color: yellow;
text-align: center;
}

Answer 4

$(function(){
  $('#elm').click(function(){
    var parentElm = $(this).parent('tagname_or_class_or_id').attr('id');
  });
});

Try this one, It should work :)