javascript - 无法调用两个 javascript 函数

Question

我试图把一些代码放在一起。我已经能够在我的网页中加载一个导航栏，它工作得很好。我还能够使用 AJAX 执行 php 函数，它返回一些值并将它们打印在我的网页中。问题是我无法将这些代码放在一起，它只是不起作用。

这是我使用 AJAX 执行 php 函数的代码：

funcion_calcular.js

$(document).ready(function() {
    $("#boton").click(function() {
        var val = $('#IBC').val();
        var porcentaje_riesgos =
            $('[name=porcentaje_riesgos]:checked').val();
        var exento_salud = $('[name=exento_salud]:checked').val();
        $.ajax({
            url: 'costo_empleado.php',
            type: 'POST',
            data: {
                "IBC": val,
                "porcentaje_riesgos": porcentaje_riesgos,
                "exento_salud": exento_salud
            },
            success: function(response) {
                $('#resultado').html(response);
            }
        });
    });
});

我在我的 HTML 中使用它，例如：

<script type="text/javascript" src="funcion_calcular.js"></script>

之后我有这个来加载我的nabber：

<script type="text/javascript"> 
   $(document).ready(function(){                 
        $('#header').load('barra_navegacion.html');
   });
</script>

导航栏正确显示问题是函数 (funcion_calcular) 将不再执行。在控制台中它说“.ajax 不是函数”。如果我单独使用这些代码，它们会完美运行。

这是我的 barra_navegacion.html 代码：

<header>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
        <a class="navbar-brand" href="mis_procesos.html">Mis Procesos</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="empresas.html">Empresas <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="mis_procesos.html">Trabajadores</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#">Contactanos</a>
           </li>
          </ul>
          <div>
            <a href="#" class="btn btn-success">Ingresar</a>
        </div>
        </div>
      </nav>
    </header>

标签： javascripthtml