Question

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

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

我有一个将另一个函数绑定到button元素的函数。像这样：

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

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

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

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

Answer 1

您将事件作为参数传递而不是传递DOM。

您可以通过以下方式将其从事件中传递出来，

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

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

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

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

可能性

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

您可以在函数中访问此对象。

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

或者您也可以在函数

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

您的问题是您正在尝试使用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
});

Answer 4

你只需要这样做：

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

和

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

你像那样使用：

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

像这样使用：

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

Answer 6

使用e.target获取点击的元素，e是事件对象。您也可以使用.closest()获取课程class的第一位家长。

另一个注意事项：使用.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 );
}

另一种解决方案是将点击的元素传递给disconnectFunction

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

然后

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

Answer 7

试试这个

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

和

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

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

7 个答案: