Jquery append()不能正常工作

我有以下HTML，其中我通过将类别ID和名称传递给函数来动态创建类别按钮。目的是在div #dvsoft中显示代表类别的产品菜单。

<div id="tabbed-nav2">
    <ul id="con1">
        <span>
            <div class="drinks">Drinks</div>
        </span>                                     
        <%for (int i = 0; i < 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>

这是在点击类别按钮时调用getDataUsingAjax的事件处理函数:

$('#con1').on('click', 'a', function (e) { //<--CHANGED DATA TO 'a'
    var id = $(this).attr('value');
    //alert("Y123");                
    getDataUsingAjax(id);
});

在下面的函数中，我从处理程序获得响应并将其附加到#dvSoftdiv的HTML内容。从每个请求中正确返回数据，但问题是只有第一个按钮(Drinks)的产品被显示。当点击任何其他类别时，都不会显示任何产品。

奇怪的是，如果我在第二个按钮(餐)上点击五到六次，然后再次点击饮料，那么餐项目就会显示出来。

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);