i have associate object each ul created dynamically. have used .data giving undefined when try retrieve. fiddle
var file= [ { "name": "jhon", "email": "manager", "image": "images/profile-pic.png", "data":{"name":"mile","depend":["amit","rajesh","deepak"]} }, { "name": "mile", "email": "manager", "image": "images/profile-pic.png", "data":{"name":"mike","depend":["amit","rajesh","deepak"]} }, { "name": "steave", "email": "manager", "image": "images/profile-pic.png", "data":{"name":"steave","depend":["amit","rajesh","deepak"]} } ] var html="" $.each(file,function(i,val){ html+= "<ul>"+"<li>"+val.name+"</li>"+"</ul>" $(html).data('obj',val.data) }) $('#check').append(html) $(function(){ $('ul').click(function(){ console.log($(this).data('obj')) }) })<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="check"></div>
following lines buggy in code
html+= "<ul>"+"<li>"+val.name+"</li>"+"</ul>"- line of code collecting ul's (names) in 1 variable.$(html).data('obj',val.data)- in line, trying set 'obj' data of each ul, using 'html' variable collection of uls. work if had 1 ul, loop proceeds, html variable contain more 1 ul , jquery won't know element want set 'obj' data.
so now, simplify, changed these 2 lines to
var ul= $("<ul>"+"<li>"+val.name+"</li>"+"</ul>");- in line, variable 'ul' store current ul created in loop. can use in next line individually.ul.data('obj',val.data);- here set data 'obj' current created ul. that's it$('#check').append(ul);- now, right after creating ul , setting 'obj' data, add in page.
minor change :
from
var html="" $.each(file,function(i,val){ html+= "<ul>"+"<li>"+val.name+"</li>"+"</ul>" $(html).data('obj',val.data) }) $('#check').append(html) to
$.each(file,function(i,val){ var ul= $("<ul>"+"<li>"+val.name+"</li>"+"</ul>"); ul.data('obj',val.data); $('#check').append(ul); }); var file= [ { "name": "jhon", "email": "manager", "image": "images/profile-pic.png", "data":{"name":"mile","depend":["amit","rajesh","deepak"]} }, { "name": "mile", "email": "manager", "image": "images/profile-pic.png", "data":{"name":"mike","depend":["amit","rajesh","deepak"]} }, { "name": "steave", "email": "manager", "image": "images/profile-pic.png", "data":{"name":"steave","depend":["amit","rajesh","deepak"]} } ] $.each(file,function(i,val){ var ul= $("<ul>"+"<li>"+val.name+"</li>"+"</ul>"); ul.data('obj',val.data); $('#check').append(ul); }); $(function(){ $('ul').click(function(){ console.log($(this).data('obj')) }) })<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="check"></div>