.hover not working for element where I dynamically assign a class

Question

I'm implementing a solution based on my previous thread, which its main objective is to check, in Magento, if a store is opened or not. IF it's opened, fine. If it's not, it should deactivate the 'Add to Cart' button and hover a text with the working hours.

This solution does:

1. Get current time on the server via AJAX
2. Check a condition using this time
3. Based on the results of the above, it assigns or not a class to a button element.

However, from my testing I'm seeing that when I try to hover an element which had a class dynamically added via $(this).addClass('btn-closed'); - it does not work. If I try to hover by matching a class which already exists on the element it works fine (however it won't work as a solution for me due to the logic).

// 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>

Please assist.

Answer 1

Your code does this:

1. Wait for DOM ready
2. Select all elements with class .btn-fechado
3. Bind them hover event.

You should bind the event when you assign the class, or use live binding for the events.

Binding when class assigned:

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

Using live binding:

$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");
});

You may replace $j(document) for a smaller container.

Answer 2

You could avoid doing this by giving the button itself an id and then use

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

Answer 3

You must use delegation:

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

Answer 4

Please try hover with jquery live

$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");

     });
});

with jquery live method you have not bind / unbind dom. for more info visit.

http://api.jquery.com/live/