jQuery 结果集不断填充

Question

我有一个 jQuery 函数，它可以进行 ajax 调用，该调用构建一个 HTML 字符串来填充 <ul></ul> 功能。问题是页面上有刷新页面的链接，问题是添加了 jQuery ajax 调用的 HTML 再次将 HTML 添加到页面，因此结果不会加倍。如果你再次这样做，结果会再次添加。

所以我的问题是如何清除 HTML 以使结果重复多次？或者解决这个问题的最佳方法是什么？

// 展开复制到分组模态组 $(".groupZones .expand").live('click', function() { $(this).siblings('.contract').show(); $(this).css('display', 'none'); $(this).parent().parent().siblings('.groupDetails').css('display', 'block'); $(this).parent().parent().siblings('.groupDetails').find('ul.device').find('ul.list').after(''); var cwpUserId = $('#ctl00_cphBody_hfCwpId').val(); var groupId = $(this).parent().siblings('.add').find('input').val(); sortOn = "位置"; var mode = "dayparts"; var groupUl = $(this).parent().parent().siblings('.groupDetails').find('ul').find('ul li.head'); var groupDetails = $(this).parent().parent().siblings('.groupDetails'); //获取区域详细信息.. // 加载。

            $.ajax({
                type: "POST",
                url: "ajax/DaypartMessagingGroups.asmx/GetDetailsForCopyToGroup",
                data: "{'groupId':" + groupId + ",'cwpUserId':" + cwpUserId + ",'pageNum':0,'pageSize':5, 'sortOn':'" + sortOn + "','sortDirection':'" + sortDirection + "','mode':'" + mode + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    //$(btn).parents("ul.list-group-zones").children("li:.head").after(msg.d);
                    $(groupUl).after(msg.d);
                    $('.location').find('.contract').hide();

                    var copyZonePerPage = 5;
                    //var copyZoneItemsCount = $(groupUl).siblings('#hfAllGroupZones').val();
                    var copyZoneItemsCount = $('#hfAllGroupZones').val();
                    var copyZonePages = Math.ceil(copyZoneItemsCount / copyZonePerPage);
                    var copyZoneHtml = '';
                    var copyZoneCurLink = 0;
                    var current_copyzone_pagination_set = 1;
                    var num_of_pagination_shown = 0;
                    alert('Line 2113 CBG');

                    if (copyZonePages > 20) {
                        //var pagesAdded = (parseInt(current_copyzone_pagination_set) - 1) * 10;

                        while (num_of_pagination_shown < 20) {
                            copyZoneHtml += '<a class="page_link_clicked" longdesc="' + copyZoneCurLink + '">' + (copyZoneCurLink + 1) + '</a>';
                            copyZoneCurLink++;
                            num_of_pagination_shown++;
                        }

                        copyZoneHtml += '<a class="page_link" id="btnNextZoneSet" longdesc="' + copyZoneCurLink + '">...</a>';

                    }
                    else {
                        while (copyZonePages > copyZoneCurLink) {
                            copyZoneHtml += '<a class="page_link_clicked" longdesc="' + copyZoneCurLink + '">' + (copyZoneCurLink + 1) + '</a>';
                            copyZoneCurLink++;
                        }
                    }

                    $(groupUl).parent().parent().find('ul li.footer').html(copyZoneHtml);
                    $('.page_link_clicked[longdesc=0]').addClass('current');

                },
                error: function(err) {
                    var err = eval("(" + err.responseText + ")");
                    if (ShowModalLogin(err.ExceptionType)) {
                        alert("An error occurred.");
                    }
                }
            });

        });

Answer 1

在插入字符串中的内容之前，我会询问<ul> 是否为空。

var $ul = $('#myUL');

if( $ul.is(':empty') )
   $ul.append( content );

或更短的版本：

$('#myUL:empty').append(content);

• http://api.jquery.com/empty-selector/

请注意，:empty 表示完全为空，包括空格。

---

编辑：

如果页面刷新是某些其他操作的不必要的副作用，您可以在处理程序中使用 event.preventDefault() 阻止这些 <a> 元素。

$('a.myLink').click(function( e ) {
    e.preventDefault(); // prevents the default behavior of the <a> element.
    // run your code
});

Answer 2

假设您添加的内容由容器（您的<ul>）包装，只需在添加新内容之前清除容器的内容即可。

您可以使用 jQuery 的 .remove() 函数来完成此操作。