Question

我需要将网页的内容加载到我现有的页面中，特别是在现有内容之后，而不是替换它。我需要在div中的最后一个HR标签之后执行此操作，我希望将内容拉入其中。

所以，我的html是：

<article>
<p>My content</p>
</article>
<hr>

所以我想在<hr>标记后直接加载我的内容。但是我正在尝试使用之后，它正在使用<hr>标记执行一些奇怪的操作，尝试将其<hr>设为我的ajax内容</hr>

$(document).ready(function(){
  $('.news-ajax-link').click(function(){
    $("article hr").after().load('/news/ajax_news/?offset=2');
    event.preventDefault();
  });
});
</script>

任何帮助都会很棒！谢谢！

Answer 1

jQuery .load()函数专门用于将内容加载到容器元素中，所以它试图做的正是你告诉它的：在里面加载那个URL的内容你的<hr>元素。

如果你想在<hr>之后附加内容，你需要使用jQuery提供的其他AJAX函数之一 - 我建议使用jQuery.ajax() - 然后在里面自己添加回调函数：

$(document).ready(function(){
    $('.news-ajax-link').click(function(event){ // note the event parameter added here
        $.ajax({
            url: '/news/ajax_news/?offset=2',
            type: 'post',
            success: function(content) {
                $("article hr").after(content);
            });
        });
        event.preventDefault();
    });
});

Answer 2

我想您可能需要关闭hr，所以请使用此

<hr />

否则jQuery（或可能是浏览器）认为它是一个未封闭的标签

编辑：实际上我认为问题出现在after（）

之后

after（）意味着有一个参数所以试试这个：

.after(/*AJAXED content here*/);

Answer 3

您可以尝试使用.append()而不是.after()。

或者可以在其中添加html代码和load()。

，例如

<article>
<p>My content</p>
</article>
<hr>
<span id="loadedContent"></span>


$(document).ready(function(){
   $('.news-ajax-link').click(function(){
     $("#loadedContent").load('/news/ajax_news/?offset=2');
    event.preventDefault();
   });
 });

在现有内容之后将ajax内容加载到div中

3 个答案: