使用 Ajax 仅重新加载页面的一部分时，指定的页面内容会重复答案

【问题标题】：Specified page content gets repeated when using Ajax to only reload a section of page使用 Ajax 仅重新加载页面的一部分时，指定的页面内容会重复
【发布时间】：2019-02-12 17:40:28
【问题描述】：

我正在开发一个带有侧边栏的 laravel 应用程序，并且当用户单击链接时不重新加载整个页面我使用了这个脚本。

<script>
    $('document').ready(function(){

      $('.nav-link').click(function (event) {
        // Avoid the link click from loading a new page
        event.preventDefault();

        // Load the content from the link's href attribute
        $('.container-fluid').load($(this).attr('href'));
    })

    });

 </script>

这是 HTML

  <a class="nav-link" href="/test">
 <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
      <div class="container-fluid">



      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

这是 /test 包含的页面内容

  this is for testing purposes only

该行重复多次。
我环顾四周寻找了许多解决方法并研究了 laravel 渲染，但我无法做到这一点。

【问题讨论】：

你能包含更多你的html吗？
是的，但我认为这么多就足够了，只需几秒钟。

标签： ajax laravel

【解决方案1】：

您使用了错误的选择器，因为 container-fluid 在您的布局中存在不止一次。

试试这个，或者在你的主要内容 div 中添加一个 id 属性：

    $('.content .container-fluid').load($(this).attr('href'));

或者

<!-- Main content -->
<div class="content">
  <div id="my-content" class="container-fluid">
  </div><!-- /.container-fluid -->
</div>
<!-- /.content -->

与：

    $('#my-content').load($(this).attr('href'));

【讨论】：

【解决方案2】：

存在两个container-fluid 类是问题所在。

【讨论】：