jQuery獲取被單擊元素的父級jQuery對象

Question

我的HTML包含許多這樣的對象：

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

我有一個將另一個功能綁定到按鈕元素的功能。 像這樣：

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

我也嘗試了this和$（this）選擇器，但是現在我莫名其妙地陷入了困境，也許有一個我找不到的簡單解決方案。

Answer 1

您將事件作為參數傳遞，而不是通過DOM。

您可以通過以下方法將其從事件中傳遞出去，

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

在斷開連接功能中，您可以按以下方式使用它。

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元素。

可能性

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

或者也可以在函數中訪問該對象

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 class的第一個父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 );
}

另一個解決方案是將clicked元素傳遞給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 );
}