jQuery click event to display specific data inside JSON array not working properly

Question

I have created 3 dummy users with JSON array like this:

var userArray = {"users":[
    {"Name":"User1","Email":"[email protected]"},
    {"Name":"User2","Email":"[email protected]"},
    {"Name":"User3","Email":"[email protected]"}
]};

Now, I want to display only the name of each user stored inside a div that has a class.

var i = 0
document.writeln("<div id=tableThis>");
for(i=0;i<userArray.users.length;i++)
{
    document.writeln("<div class=allUser>");
    document.writeln("<b>User :: </b>"
            + userArray.users[i].Name);
    document.writeln("<div class=emails><b>Email :: </b>"
            + userArray.users[i].Email  +"</div>");
    document.writeln("</div>");
}

It works fine to display only the names if I give the class .emails display:none

Now, what I am trying to achieve is when each name is clicked, it should display their e-mails below in a div. But everytime I click the div called .allUser it will display all the emails right away, which makes sense because all of the emails have the same class.

I am using the code below

$(document).ready(function(){
$(".allUser").click(function() {
    $('.emails').show(1000);
});

});

I would preferably want to toggle each name so I could show, hide each users email when you click the name of each user.

It´s hard for me to provide a fiddle when they dont allow document.writeIn

Would there be a neater/cleaner way to achieve this small task ?

Ehsan Sajjad · Accepted Answer · 2014-09-14 18:45:21Z

1

You need deleagted event as html is generated dynamically after DOM load, and use find() to get Child element with class .emails,

Do like this:

$(document).ready(function(){
$(document).on("click",".allUser",function() {
    $(this),find('.emails').show(1000);
});

});

edited Sep 14, 2014 at 18:45

answered Sep 14, 2014 at 18:19

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery click event to display specific data inside JSON array not working properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related