1

我的 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')Method，但这总是返回错误，例如对象没有方法...我的第二个目标是从隐藏的输入字段中提取 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) 选择器，但不知何故我现在卡住了，也许有一个我找不到的简单解决方案。

4

7 回答 7

4

您将事件作为参数传递，而不是传递 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 );
}
于 2013-04-26T06:48:05.877 回答
1

您的问题是您尝试使用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
});
于 2013-04-26T06:45:45.710 回答
1

您需要传递当前对象而不是事件对象。请使用 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 );
    }
于 2013-04-26T06:45:27.970 回答
1

你只需要这样做：

$('.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 );
}
于 2013-04-26T06:50:24.460 回答
0

你像这样使用：

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

像这样使用：

var parent = $(e).parents('.class');
于 2013-04-26T06:47:09.043 回答
0

用来获取被点击e.target的元素，e是事件对象。您也可以使用.closest()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 );
}

另一种解决方案是将点击的元素传递给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);
});
于 2013-04-26T06:47:29.420 回答
0

尝试这个

$('.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 );
}
于 2013-04-26T06:48:22.450 回答