javascript jQuery 获取被点击元素的父 jQuery 对象

jQuery get parent jQuery Object of clicked element

提问by Karl Adler

My HTML contains many objects like this:

我的 HTML 包含许多这样的对象：

<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.

我想要做的是首先获取按钮所在的 Div，我尝试使用e.parents('.class')方法，但这总是返回错误，例如对象没有方法......我的第二个目标是从隐藏的输入字段中提取值属性父母部门

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.

我也试过这个和 $(this) 选择器，但不知何故我现在卡住了，也许有一个我找不到的简单解决方案。

回答by Dipesh Parmar

You passing events as argument instead pass DOM.

您将事件作为参数传递而不是传递 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.

在 disconnectFunction 中，您可以按如下方式使用它。

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

回答by pala?н

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

回答by Ravi Gadag

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

您需要传递当前对象而不是事件对象。并请使用 on('events') 方法将事件附加到 dom 元素。

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

1. 您可以传递当前对象
2. 您可以通过 Event.Target 属性访问 Event 对象中的当前对象。

3. 你可以在你的函数中访问这个对象。

   $('.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 );
    }

回答by Nemoden

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

您的问题是您正在尝试使用event对象，而不是 HTML 对象。

$('.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
});

回答by John

you use as like that:

你这样使用：

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

use as like that:

像这样使用：

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

回答by Arun P Johny

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

使用e.target来获取点击的元素，e是事件对象。您也可以使用.closest()class 来获取第一个父级class。

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

另一个注意事项：使用.val()来获取输入字段的值，而不是使用.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

另一种解决方案是将单击的元素传递给 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);
});

回答by iCode

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