jQuery get parent jQuery Object of clicked element

Question

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.

Answer 1

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 );
}

Answer 2

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 );
    }

Answer 3

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
});

Answer 4

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 );
}

Answer 5

you use as like that:

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

use as like that:

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

Answer 6

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);
});

Answer 7

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 );
}