javascript - jQuery 的 ajax 和 $.post() 向自身发出请求后重复的 div

Question

我在使用 jQuery 时遇到了一些问题。我有一个 PHP 文件，其中有我的分页列表。该文件有一个如下脚本:

    <script>
    <?php if(isset($string)){ ?> var str = "<?php echo $string; ?>"; <?php } ?>
    var off = "<?php echo $offset; ?>";
    var npp = "<?php echo $num_per_page; ?>";

    $('a[id=pagination]').click( function (e) {
    e.preventDefault();
    $.get($(this).attr('href'),<?php if(isset($string)){ ?> { st : str },<?php } ?> function (data){ $('#pagination').empty(); $('#pagination').hide().html(data).fadeIn(); });
    });
    </script>

加载此页面后，此文件中的内容将通过ajax方法添加到页面中的div中。该内容中的脚本位于 #pagination div 之后(也属于该内容)。

问题是，单击链接后，脚本会在第一个 #pagination div 中创建另一个 #pagination div，并且在第二个副本上一切正常。为什么会发生这种情况以及如何解决这个问题，因为我不想有这样的嵌套 div？

Answer 1

发生这种情况是因为 AJAX 服务器返回包含 #pagination DIV 的 HTML，而您正在使用 $("#pagination").html()将其放入具有该 ID 的现有 DIV 中。

您有多种选择:

1. 更改服务器脚本，使其仅返回内容，而不返回#pagination DIV。
2. 在#pagination周围添加一个容器DIV，例如#paginationContainer，并使用 $("#paginationContainer").html(data)。
3. 使用 replaceWith 而不是 html，这样您就可以覆盖整个 DIV 而不是内容。

顺便说一句，在使用 .html() 之前，您不需要使用 .empty()，因为后者完全替换了内容。