代码之家  ›  专栏  ›  技术社区  ›  Lord Elrond Mureinik

不能同时使用ajax POST和jquery动画(使用引导)

  •  0
  • Lord Elrond Mureinik  · 技术社区  · 7 年前

    Bootstrap Template 它有一个侧栏,当用户单击 .nav-menu

    $(document).ready(function () {
    
        $( '.nav-menu' ).click(function() {
             event.preventDefault();
             if($( '.nav-menu-item' ).is(":visible")){
                  $('.nav-menu-item' ).hide('slide', {direction:'left'}, 1000);
                  $('#menu-item-container').addClass('sidebar-hidden');
             } else{
                  $('.nav-menu-item' ).show('slide', {direction:'left'}, 1000);
                  $('#menu-item-container').removeClass('sidebar-hidden');  
             }
        });
    });
    

    上面的代码运行良好。

    当我尝试包含一篇ajax文章时,问题就出现了,如下所示:

    $(document).ready(function () {
    
        $( '.nav-menu' ).click(function() {
             event.preventDefault();
             if($( '.nav-menu-item' ).is(":visible")){
                  $('.nav-menu-item' ).hide('slide', {direction:'left'}, 1000);
                  $('#menu-item-container').addClass('sidebar-hidden');
    
                  $.ajax({
                    url:'/userSettings',
                    type:'POST',
                    data:{'sidebar':'0'}
                  });
    
    
             } else{
                  $('.nav-menu-item' ).show('slide', {direction:'left'}, 1000);
                  $('#menu-item-container').removeClass('sidebar-hidden'); 
    
                  $.ajax({
                    url:'/userSettings',
                    type:'POST',
                    data:{'sidebar':'1'}
                  });
    
             }
        });
    });
    

    this 在我的public/js文件夹中,并在页脚中添加了以下内容:

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    

    现在ajax帖子工作正常(除了我必须双击 )但是“显示/隐藏”动画无法正常工作!

    $('.nav-menu-item' ).hide('slide', {direction:'left'}, 1000);

    这是Chrome控制台中的错误(其中有7270个):

    jquery-3.3.1.js:6710 Uncaught TypeError: jQuery.easing[this.easing] is not a function
        at init.run (jquery-3.3.1.js:6710)
        at tick (jquery-3.3.1.js:7094)
        at Function.jQuery.fx.tick (jquery-3.3.1.js:7436)
        at schedule (jquery-3.3.1.js:6813)
    

    不确定这是否相关,但这是整个页脚:

    //bootstrap required
    <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    //bootstrap required
    
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script src="js/dashboard.js"></script>
    <script src="js/jquery.js"></script>
    </body>
    </html>
    
    1 回复  |  直到 7 年前
        1
  •  2
  •   JasonB    7 年前

    这个 jQuery hide() documentation 显示具有3个参数的hide的签名为hide(持续时间、缓解、完成),其中缓解和完成是函数。您正在传递三个参数。第一个是由jQuery使用回退处理的,但是第二个是easing,它需要一个函数,并且您已经传递了一个对象。

    也许它只是在添加ajax代码之前才开始工作。也许您当时也遇到了错误,但它们并没有阻止其他代码的运行。