Javascript 。悬停不适用于我动态分配类的元素

我正在实施一个基于我以前的解决方案，其主要目标是在Magento中检查商店是否已开业。如果打开了，没问题。如果不是，则应停用“添加到购物车”按钮，并将带有工作时间的文本悬停

此解决方案具有以下功能：

通过AJAX获取服务器上的当前时间 使用此时间检查条件 根据上面的结果，它是否为button元素指定类。 然而，从我的测试中，我发现当我尝试悬停一个元素时，该元素通过$this.addClass'btn-closed'；-它不起作用。如果我尝试通过匹配元素上已经存在的类来悬停，它可以正常工作，但是由于逻辑原因，它不能作为解决方案

// funcao para acertar as classes dos botoes aberto fechado
 $j.get('/restaurante/hora', function(data) {
        $j('#now').val(data);
        // Box de Sugestoes
        $j("#products-grid-QD .btn-cart").each( function() {
            //alert($j(this).attr('tipo') + " " +  $j(this).attr('abre1') + " " + $j(this).attr('fecha1') + " " + $j(this).attr('abre2') + " " + $j(this).attr('fecha2') + " " + $j('#now').val())
            if (checkinrange($j(this).attr('tipo'), $j(this).attr('abre1'),$j(this).attr('fecha1'),$j(this).attr('abre2'),$j(this).attr('fecha2'),$j('#now').val())) {
                $j(this).removeClass('btn-fechado');
            } else {
                $j(this).addClass('btn-fechado');
                $j(this).removeAttr('onclick');
                $j(".commentBtn").text('Fechado');

            }

        });
    }); 


    $j(document).ready(function(){
        $j('.btn-fechado').hover(function() {               
           $j(this).next(".commentBtn").animate({opacity: "show"}, "slow");
         }, function() {
           $j(this).next(".commentBtn").animate({opacity: "hide"}, "fast");

         });
    });




<button type="button" onclick="btnComprar(<?php echo $_help['store_id']; ?>, '<?php echo $this->getAddToCartUrl($_product); ?>', '<?php echo $_help['nome'];?>')" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')" tipo="<?php echo $_help['tipo'];?>" abre1="<?php echo $_help['abre1'];?>" fecha1="<?php echo $_help['fecha1'];?>" abre2="<?php echo $_help['abre2'];?>" fecha2="<?php echo $_help['fecha2'];?>" >
                                    <span><span><?php echo $this->__('Add to Cart') ?></span></span>
                                </button>
                                <span class="commentBtn"></span>

请协助。

您的代码执行以下操作：

等待DOM就绪 选择类为.btn fechado的所有元素 将它们绑定到悬停事件。 您应该在分配类时绑定事件，或者对事件使用实时绑定

指定类时的绑定：

$j(this).addClass('btn-fechado')
  .hover(function() {
    $j(this).next(".commentBtn").animate({opacity: "show"}, "slow");
  }, function() {
    $j(this).next(".commentBtn").animate({opacity: "hide"}, "fast");
  });

使用实时绑定：

$j(document).on("mouseover", '.btn-fechado', function() {               
  $j(this).next(".commentBtn").animate({opacity: "show"}, "slow");
});
$j(document).on("mouseout", '.btn-fechado', function() {
  $j(this).next(".commentBtn").animate({opacity: "hide"}, "fast");
});

---

您可以用较小的容器替换$jdocument。

您可以通过给按钮本身一个id，然后使用

$('#yourButton').addClass('yourClass');
$('#yourButton').on('hover', function() {});

---

您必须使用委托：

$j(document).on('hover','.btn-fechado',function() {
 ....
}

请尝试使用jquery live悬停

使用jquery live方法，您没有绑定/取消绑定dom。 欲了解更多信息，请访问

---

对于jquery 1.7+，live已被折旧，但on不推荐使用“on”代替live。使用.on可以从那里随意获取代码：谢谢迭戈！这工作得很好：当我添加类时，通过分配悬停事件，它工作得很好。感谢大家的贡献，很抱歉花了太多时间回复。

$j(document).ready(function(){
    $j('.btn-fechado').live('hover',function() {               
       $j(this).next(".commentBtn").animate({opacity: "show"}, "slow");
     }, function() {
       $j(this).next(".commentBtn").animate({opacity: "hide"}, "fast");

     });
});