0

I am trying to append list[i].name and list[i].email once every time sponsorListTree li is being clicked. I can append the document.getElementById("name").appendChild(div_group); but the problem occurs when i click the div a few times, the same data will add up instead of displaying the result only once

$.ajax({
            url: 'test.php',
            method: 'GET',
            success: function(data){             
                var list = data;
                for (i = 0; i < list.length; i++) { 
                $('#sponsorListTree li').attr('id', function(i) {
                    return 'sponsorListTree'+(i+1);
                });
                $('#sponsorListTree').append('<li class="button"><a href="#myModal" id= "investor" data-toggle="modal" >'+list[i].name+'<br/> <table class="data"><tbody><tr><td><span id="information" class="details"><br/><br/> '+ 'Email: ' + list[i].email + '</br></br> '+ 'Contact No: ' + list[i].contact.phone + ' </br></br> '+ 'Joined date: '  + list[i].date + ' </br> </br>'+  'InvestedAmount: ' + list[i].account.investedAmount + '</span></td></tr></tbody><table></a></li>');

                }
                $("#sponsorListTree li").click(function() {
                    var name = $(this)[0].innerHTML;
                    var details = $(this).find('span')[0].innerHTML     
                    var div_name = document.createElement('div');
                    var div_details = document.createElement('div');
                    div_name.innerHTML = name;
                    div_details.innerHTML = details;
                    div_name.className ="nameDetail";
                    div_details.className ="detail";                    
                    var div_group = document.createElement('div');
                    div_group.append(div_name);
                    div_group.append(div_details);
                    document.getElementById("name").append(div_group);  
                }); 

                $(".button").click(function() {
                    $("span").toggleClass("details");
                });

            }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style=" overflow-x: auto; width: 400%; height: 600px;">
        <li>
            <a id="root" href="#"></a>
            <ul id ="sponsorListTree">
            </ul>
        </li>
</ul>
<div id = "name" class="control-label"></div>

Improve this question
13
  • 2
    Why are you binding event handler in the success callback handler? Commented Jul 17, 2017 at 13:48
  • Possible duplicate of JavaScript for loop on files FileReader <- it's about the scope of var and let Commented Jul 17, 2017 at 13:49
  • for (i = 0 for (var i = 0 Commented Jul 17, 2017 at 13:49
  • You say, "when i click the div a few times, the same details will appear." isn't that the intended functionality? If you are clicking on the same list item, the email of that list item will not change. Commented Jul 17, 2017 at 14:00
  • yes thats true but it keeps adding a new record each time i click on the div. I want the record only to be shown once Commented Jul 17, 2017 at 14:06
Related questions
0
jQuery append problem
0
Append element problem
1
.append() removes added element
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.