javascript - Jquery append() not working properly -

i have following html in dynamically creating category buttons passing category id , name function. aim show product menus on behalf of category in div #dvsoft.

<div id="tabbed-nav2">     <ul id="con1">         <span>             <div class="drinks">drinks</div>         </span>                                               <%for (int = 0; < dtcategory.rows.count; i++) {             string str = dtcategory.rows[i]["categoryname"].tostring();             int categoryid =convert.toint32(dtcategory.rows[i]["productcategoryid"]);         %>         <li><a href="javascript:;" value="<%= categoryid %>" > <%= str %> </a></li>         <%} %>     </ul>     <div class="center-content">         <div id="dvsoft"></div>     </div> </div> 

this event handler function calls getdatausingajax on click of category button:

$('#con1').on('click', 'a', function (e) { //<--changed data 'a'     var id = $(this).attr('value');     //alert("y123");                     getdatausingajax(id); }); 

in following function getting response handler , appending html content of #dvsoft div. data returned correctly every request, problem products of first button (drinks) bein displayed. when clicking on of other categories none of products being shown.

oddly, if click 5 or 6 times on second button (meal) , click on drinks again, meal items shown.

function getdatausingajax(id) {               $.get('<%=resolveurl("~/ajaxhandler.ashx") %>', { op: 'getuserdata', value: id }, function(data, status) {                  $('#dvsoft').empty();                 var sitecontents = data.contents;                  $(data).each(function() {                     var html = '<div class="items">';                     html += '<div class="inr-item">';                     html += '<img src="' + this.picture + '" style="margin-top: 4px;"/>';                     html += '</div>';                      html += '<h4 class="item-title">';                     html += this.productname;                     html += '</h4>';                      html += '<span class="item-rate">';                     html += this.price;                     html += '</span>';                     html += '</div>';                       $('#dvsoft').append(html); 

well you're doing

$('#dvsoft').empty(); 

each time press link.

on note, you're iterating "data" instead of "sitecontents"