如何獲取div觸發事件，如果我有功能點擊它？

Question

鑑於此HTML代碼：

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

我需要檢索role-id在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沒有這個？

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> 

使用jQueryevent-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 
});