Question

在ajax电话之后我的侧边栏很迟钝。

我的代码：

$(document).ready(function () {
      $.post("<?php echo $baseurl;?>/api-cart-top.php",{ 
        unique: "<?php echo $unique;?>"
      },
      function(data) {
        $('#cartoon').html(data);
      });
      $('.rnd').on('click','#openside',function(){
          $('#sidebar').removeClass('active');
      });
      $('.rnd').on('click','#closeside',function(){
          $('#sidebar').addClass('active');
      });
});

使用ajax即可为购物车项目提供唯一代码。

但是在ajax调用之后它是滞后的。我怎么能再次顺利。

我认为这是滞后的，因为ID #sidebar和#closeide，＃openside ..

Class .rnd是ajax调用之外的随机div。

HTML：

<div class="total-cart total-cart-2 f-left rnd">
    <div id="cartoon" class="mini-cart">
        <?php include("api-cart-top.php"); ?>
    </div>
</div>

api-cart-top.php它通过ajax调用#cartoon获取唯一代码，而php文件内部是#openside和#clideside ID。

api-cart-top.php中的HTML代码：

<div class="total-cart-in">
    <div class="cart-toggler">
        <a href="#" id="openside" class="active">
            <span class="cart-quantity">1</span><br>
            <span class="cart-icon">
                <i class="zmdi zmdi-shopping-cart-plus"></i>
            </span>
        </a>                            
    </div>
    <nav id="sidebar" class="active">
        <div class="sidebar-header">
            <div style="display: flex;">
                <h3><i class="zmdi zmdi-close-circle-o" id="closeside"></i></h3>
                <h3 style="padding-left: 25px;">Cart</h3>
            </div>
        </div>
    </nav>
</div>

我第一次使用jquery代码：

$('#openside').on('click',function(){/* code inside */}

这只适用于没有ajax调用..

Answer 1

这里有一些微妙的东西......

.rnd包括.#cartoon，其中包含#openside / #closeside。

现在 #cartoon在定义处理程序后的几个ms内刷新。

使用委托...确保处理程序“事件负责”的静态元素但不是“动态奴隶”。

尝试：

$('.rnd').on('click','#openside',function(){
  $(document).find('#sidebar').removeClass('active');
});

同样适用于#closeside （我希望在文档中的给定时间内它是唯一的。）

在ajax调用之后，点击是滞后的

1 个答案: