CODEWITHSUNDEEP
javascriptjquery
Karl Adler
Karl Adler

Reputation: 16786

jQuery get parent jQuery Object of clicked element

My HTML contains many objects like this:

<div class="class">
  <div class="disconnect_btn">Click here</div>
  <input type="hidden" name="ID" value="12"/>
</div>

I have a function that binds another function to the button element. Like this:

$('.disconnect_btn').bind('click',function(e){
    disconnectFunction(e);
});

What I want to do ist to get first the Div where the button is, I tried to using e.parents('.class') Method, but this always returns error like object has no method... My second target is to extract the value attribute from the hidden input field in parents Div.

function disconnectFunction(e){
    var parent = e.parents('.class'));  //returns error
    var ID = parent.find('input:hidden[name=ID]').attr('value');
    console.log( ID );
}

I also tried this and $(this) selectors, but somehow I got stucked now, maybe there is an easy solution that I can't find.

Upvotes: 1

Views: 14609

Answers (7)

John
John

Reputation: 539

you use as like that:

var parent = e.parents('.class'));  //returns error

use as like that:

var parent = $(e).parents('.class');

Upvotes: 0

palaѕн
palaѕн

Reputation: 73886

You just need to do this:

$('.disconnect_btn').on('click',function(e){
    disconnectFunction($(e.target));  // <== Pass $(e.target) or $(this), in place of e
});

And

function disconnectFunction(e){
    var parent = e.parents('.class'); // <== Remove a extra bracket here..  
    var ID = parent.find('input:hidden[name=ID]').val();
    console.log( ID );
}

Upvotes: 1

iCode
iCode

Reputation: 9202

try this

$('.disconnect_btn').bind('click',function(e){
    disconnectFunction($(this));
});

and

function disconnectFunction(e){
    var parent = $(this).parents('.class');
    var ID = parent.find('input:hidden[name=ID]').attr('value');
    console.log( ID );
}

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27354

You passing events as argument instead pass DOM.

you can pass it from event by doing it as below,

$('.disconnect_btn').on('click',function(e){
    disconnectFunction(e.target);
});

and in disconnectFunction you can use it as below.

function disconnectFunction(e){
    var parent = $(e).parents('.class'));  //returns error
             ---^^^^^-----
    var ID = parent.find('input:hidden[name=ID]').attr('value');
    console.log( ID );
}

Upvotes: 4

Arun P Johny
Arun P Johny

Reputation: 388316

Use e.target to get the clicked element, e is the event object. Also you can use .closest() to get the first parent with class class.

Another note: use .val() to get the value of a input field instead of using .attr()

function disconnectFunction(e){
    var parent = $(e.target).closest('.class'));  //returns error
    var ID = parent.find('input:hidden[name=ID]').val();
    console.log( ID );
}

Another solution is to pass the clicked element to disconnectFunction

function disconnectFunction(el){
    var parent = $(el).closest('.class'));  //returns error
    var ID = parent.find('input:hidden[name=ID]').val();
    console.log( ID );
}

then

$('.disconnect_btn').bind('click',function(e){
    disconnectFunction(this);
});

Upvotes: 0

Nemoden
Nemoden

Reputation: 9056

Your problem is you are trying to use event object, not a HTML object.

$('.disconnect_btn').bind('click',function(e){
    // `e` refers to event object received by the callback function
    // `this` refers to the HTMLElement that was clicked
    // $(this) turns `this` (which is HTMLElement object) to `jQuery` object
    disconnectFunction($(this)); // this will do the trick
    // now, you can use `e` parameter inside disconnectFunction
    // as a `jQuery` object which has `parents` method defined
});

Upvotes: 1

Ravi Gadag
Ravi Gadag

Reputation: 15851

you need to pass the current object rather than the event object. and please use on('events') method to attach events to dom elements.

possibilities

  1. You can pass current object
  2. you can access current object in Event object via Event.Target property.

  3. You can access this object in your function. 

    $('.disconnect_btn').on('click',function(e){
   disconnectFunction(this);
});

 function disconnectFunction(currObj){
   var parent = $(currObj).parents('.class'));  
   var ID = parent.find('input:hidden[name=ID]').attr('value');
    console.log( ID );
}

or alternativily you can access this object in the function also 

function disconnectFunction(e){
        var parent = $(this).parents('.class'));  //here this refer to clicked object
         var parent = $(e.Target).parents('.class'));  //Using event.Target Property
        var ID = parent.find('input:hidden[name=ID]').attr('value');
        console.log( ID );
    }

Upvotes: 1

Related Questions