如果我具有onclick函數，如何獲取引發事件的div？

Question

給出以下HTML代碼：

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

單擊div時，我需要檢索role-id 。

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 ？

Answer 1

更好的方法是使用jQuery事件綁定，但是使用您的方法，從調用的函數傳遞this上下文：

問題：在您的示例中， this不是在其上調用事件的element ，而是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 ：

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>

Answer 2

您應該使用jQuery注冊事件，這使查找調用元素變得更加容易：

$('.update_user').click(UpdateRole);

您現在可以：

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

Answer 3

這非常簡單，您需要使用來更新此行。 data- *是html5用於設置和獲取數據的新屬性

$(".update_user").on("click",function(){
  elm=$(this).parent().data("role-id");
   elm // this element consist of role id, now you can use this variable
});