jquery - how to use javascript onclick event handler for same class of anchor elements -
this javascript:
here grab data using ajax request , call function:
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); } here problem, data contains 33 objects, , according object there 33 html boxes belong person profile. attached onclick event handler in anchor tag , user id through custom function ontabaction. along id want string like: ontabaction('+value['user_id']+',actionstr) when call function , print output in console.log: prints user id once , string equal object quantiy li#actionstr. in short both string , id , make url query on other url. please me on stuff, if string , id have remove anchor main page place anchor on other page.
here working example, code posted can't make working example because of missing:
<!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>
Comments
Post a Comment