[英]How can I use a class method as onclick handler in JavaScript?
[英]how to use javascript onclick event handler for same class of anchor elements
這是我的javascript:
在這里,我使用ajax get請求獲取數據並調用此函數:
function fetch_user_data(data) {
$(user_board['results']).each(function(attributes,value){
$('.main_container').append(
'<div class="pin" id='+attributes+'>\
<div class="holder">\
<a class="image" href="" title="Photo number 1" pin_id='+ attributes +'>\
<img src="'+ value['profile'] + '" />\
</a>\
<p class="desc">' + value['name'] + '</p>\
<ul id="pin_actions">\
<li id="awe"><a href="#" onClick="onTabAction('+value['user_id']+'); return false;"></a></li>\
<li id="cof"><a href="#" onClick="onTabAction('+value['user_id']+'); return false;" ></a></li>\
<li id="ban"><a href="#" onClick="onTabAction('+value['user_id']+'); return false;" ></a></li>\
</ul>\
</div>'
);
});
}
function onTabAction(id,action) {
console.log(id);
console.log(action);
}
這是一個問題,我的數據包含33個對象,然后根據對象有33個屬於個人資料的html框。 我在錨標記中附加了onclick事件處理程序 ,並通過自定義函數onTabAction獲取用戶ID。 與ID一起我想得到一個字符串: onTabAction('+value['user_id']+',actionstr)
但是當我調用此函數並在console.log中打印輸出時:它只打印一次用戶ID和等於對象的字符串像li#actionstr一樣量化 。 簡而言之,我想同時獲取字符串和ID,並創建一個要查詢其他網址的網址。 請幫助我解決這些問題,如果我得到字符串和ID,我也必須從主頁上刪除該錨點,因為我將該錨點放在其他頁面上。
這是一個有效的示例,使用您發布的代碼,我無法建立一個有效的示例,因為其中大部分都丟失了:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
<style type="text/css">
.clickable{
cursor:pointer;
}
</style>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var someData=["one","two","three"],
i=0,
user_id="my user id",
$main=$('.main_container');
for(i=0;i<someData.length;i++){
$main.append(
"<h1>"+someData[i]+"</h1>\
<ul id=\"pin_actions\">\
<li class=\"clickable\" data-action='awe'>awe</li>\
<li class=\"clickable\" data-action='cof'>cof</li>\
<li class=\"clickable\" data-action='ban'>ban</li>\
</ul>"
);
}
$main.attr("data-userID",user_id);
//attach onclick
$('.main_container').find("li").on("click",onTabAction);
});
function onTabAction(e) {
console.log("userID:",this.parentElement.parentElement.getAttribute("data-userID"));
console.log("action:",this.getAttribute("data-action"));
}
</script>
</head>
<body>
<div class="main_container">
</div>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.