CODEWITHSUNDEEP
jqueryasp.nethtmlparent
Y2theZ
Y2theZ

Reputation: 10412

JQuery: Get the parent element id of a clicked element

I have a div like this:

<div id="popupDiv1" class="popupDivClass">
    <a id="popupDivClose" class="popupCloseClass">x</a>
</div>

When I click on the 'x' (I want to run a jquery function called disablePopup(id); where id is the id of the coresponding popupDiv (I have many popupDiv each with it's own X button.

in order to do so I implemented the following

$(".popupCloseClass").click(function (event) {
    var buttonID = $(event.target).attr("id");
    var id = $( buttonID).closest("div").attr("id");
disablePopup(id);
});

basicaly I get the id of the popupCloseClass clicked then I get the id of it's parent (the corresponding popupDiv) via the closest method. then I call disablePopup.

But this is not working.

I even tryed to use the var buttonID = $(buttonID).parent().attr("id"); method but did not work either.

I also tried var id = this.id;

Any help is greatly appreciated

Thanks

Upvotes: 8

Views: 21346

Answers (4)

Richard Dalton
Richard Dalton

Reputation: 35803

This works fine:

$('a.popupCloseClass').click(function() {
    var id = $(this).parent().attr('id');
});​

JSFiddle Demo

You should just use this instead of the way you are getting the ID and then trying to use it as a selector (you were missing the # before the ID):

Upvotes: 0

musefan
musefan

Reputation: 48455

instead of using closest you can use parent like this...

var id = $(this).parent().attr("id");

Notice you can use the this keyword to reference the element that kicked off the event. As you have it, you are using the value of buttonID as the element selector which would have a value of "popupDivClose" and without adding a # at the start it will not search for an ID, but rather a tag element called "popupDivClose".

If you wanted to keep using buttonID you could have used this line of code to get it working...

var id = $("#" + buttonID).parent().attr("id");

However, I would have preferred to write the whole event like so...

$(".popupCloseClass").click(function (event) {
    event.preventDefault();

    var id = $(this).parent().attr("id");

    disablePopup(id);
});

notice the use of event.preventDefault(); this will ensure that the browser will not process the natural action for a link click (i.e. page navigation) - though, in Chrome at least, you need to specify a href value for the navigation anyway

Here is a working example

Upvotes: 13

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

You should do

$(".popupCloseClass").click(function (event) {
    var id = $(this).closest("div").attr("id");
});

(you could also use $(this).parent().attr("id"); ) but using closest is safer in case you change your html structure

Upvotes: 1

pascalvgemert
pascalvgemert

Reputation: 1247

This must work:

$(".popupCloseClass").click(function (event) 
{
    var buttonID = $(this).parent().attr('id');
    disablePopup(buttonID);
});

Upvotes: 0

Related Questions