繁体   English   中英

如何对同一类锚元素使用javascript onclick事件处理程序

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM