如果我具有onclick函数，如何获取引发事件的div? [英] How to get div that fired event if i have function onclick on it?

问题描述

给出以下HTML代码:

Given this HTML code:

<td role-id="@Model.Id">
    @Model.Name
    <div class='glyphicon glyphicon-edit update_user' onclick='UpdateRole()'></div>
</td>

在div上单击时，我需要检索role-id.

I need to retrieve role-id when clicking on the div.

JS代码:

function UpdateRole() {
    $("#ModalUser").show();
    var role_id = $(this).parent().attr("role-id");
    var user_id = $(this).parent().parent().attr("user-id");
    console.log(role_id);
    console.log(user_id);
};

两个值都是undefined，如果没有这个值我怎么能得到role-id?

Both values are undefined, how can I get role-id without this?

推荐答案

更好的方法是使用jQuery事件绑定，但是使用您的方法，从调用的函数传递this上下文:

Better approach is to use jQuery event binding, but using your approach, pass this context from called function:

问题:在您的示例中，this不是在其上调用事件的element，而是window！

Problem: In your example, this is not the element on which event is invoked but window!

function UpdateRole(that) {
  $("#ModalUser").show();
  var role_id = $(that).parent().attr("role-id");
  var user_id = $(that).parent().parent().attr("user-id");
  console.log(role_id);
  console.log(user_id);
};

<td role-id="@Model.Id">
  @Model.Name
  <div class='glyphicon glyphicon-edit update_user' onclick='UpdateRole(this)'></div>
</td>

使用jQuery event-binding:

Using jQuery event-binding:

function UpdateRole() {
  $("#ModalUser").show();
  var role_id = $(this).parent().attr("role-id");
  var user_id = $(this).parent().parent().attr("user-id");
  console.log(role_id);
  console.log(user_id);
}
$('.update_user').on('click', UpdateRole);

<td role-id="@Model.Id">
  @Model.Name
  <div class='glyphicon glyphicon-edit update_user' onclick='UpdateRole(this)'></div>
</td>

这篇关于如果我具有onclick函数，如何获取引发事件的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！