AJAX 响应未附加 JQuery

Question

我希望这里有人可以帮助我。我不太使用 JQuery 或 javascript——我更喜欢 php。除了使用 JQuery 将内容实际附加到 UL 之外，我有一些似乎可以工作的代码。如果我在 firebug 中查看日志，我会看到它带回了正确的数据，但数据从未真正放入页面中。我试过 .html、.load 和 .append 都没有成功。它总是会从 .load 中的 php 脚本加载初始 HTML，但即使数据始终相同，.append 或 .html 是否有效也会受到影响。这是我得到的：

$(document).ready(function(){
        var page = 1;

        $('#favoritesul').load("/custom/getfavorites.php"); //initial load

        //load more on click
        $('#favoritesul').on( "click", "a.paginated", function (e) {
            e.preventDefault();
            ++page; //increment page counter
            //temporarily hide the load icon
            $('#favoritesul > a.paginated').remove();
            //send AJAX
            $.ajax({
                type: 'POST',
                dataType: 'html',
                url: '/custom/getfavorites.php',
                data: { page: page}
            })
            .done(function(data) {
                $('#favoritesul').append(data);
                $('#favoritesul').append('<a href="#" class="paginated"><i class="icon-undo"></i>LOAD MORE</a></ul>');
            })
            .fail(function(){
                alert('post failed');
            });
        });
    });

正如我所说，如果我使用 console.log 并查看 AJAX 响应，我会看到我期望的 HTML，它不会附加甚至替换 HTML 的内容。为清楚起见，我尝试附加的 HTML 内容如下所示：

<li class='data-item'><div class='test'><div class='padding'><div class='image-container'><a href='pagelink.php'><img class='image' src='imagesource.jpg' /></a></div><div class='header'><h2 class='heading'><a href='pagelink.php'>Video</a></h2></div></div></div></li>

在第一个 .load 事件之前，现有页面的相关部分如下所示：

<div class='clear'></div><ul id='favoritesul' class='someclasses'></ul>

提前感谢所有帮助！

Answer 1

您的 done() 处理程序中确实有无效的 HTML。首先，#favoritesul 是一个 UL，您不能将锚附加到它，只能附加一个 LI，其次，您不能附加部分元素，就像您试图通过仅包含结束 </ul> 标记一样。

尝试附加有效的 HTML

.done(function(data) {
    var li = $('<li />');

    li.append(data);
    li.append('<a href="#" class="paginated"><i class="icon-undo"></i>LOAD MORE</a>');


     $('#favoritesul').append(li);
})