Question

我有以下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);
});

在以下函数中，我从处理程序获取响应并将其附加到#dvSoft div的HTML内容。从每个请求正确返回数据，但问题是只显示第一个按钮（饮料）的产品。点击任何其他类别时，没有任何产品被显示。

奇怪的是，如果我在第二个按钮（用餐）上点击五六次，然后再次点击饮品，则会显示用餐项目。

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

Answer 1

你正在做什么

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

每次按下链接。

另一方面，您正在迭代“数据”而不是“siteContents”

Jquery append（）无法正常工作

1 个答案: