JQuery не распознает событие click в одном div, но чужие

Question

Итак, у меня есть это 4 раздела, и в моем html есть 3 и 1 нижний колонтитул, а jquery применяет класс css при нажатии, проблема в том, что нижний колонтитул, который также является липким нижним колонтитулом с использованием jquery, не распознает даже событие click.

<div id="principal"> 

     <section class="rbox" id="left"> 
      <em> 
       <i class="fa fa-users"></i> 
      </em> 
     </section> 

     <section class="rbox" id="top"> 
      <em> 
       <i class="fa fa-book"></i> 
      </em> 

     </section> 

     <section class="rbox" id="right"> 
      <em> 
       <i class="fa fa-inbox"></i> 
      </em> 
     </section> 


    </div> 
     <footer class="rbox" id="bottom"> 
      <em> 
       <i class="fa fa-inbox"></i> 
      </em>   
     </footer> 

Вот в ЯШ:

$(document).on("ready", inicio); 
function inicio(){ 
    var bodyHeight = $("body").height(); 
    var vwptHeight = $(window).height(); 

    if(vwptHeight > bodyHeight){ 
     $("footer#bottom").css("position", "absolute").css("bottom", 0); 
    } 

    $('.rbox').on("click", despliegue); 
    $('footer#bottom').on("click", function(){ 
     $("footer#bottom").css("background", "red"); 
    }) 

}; 

function despliegue(){ 
    alert("hola"); 
    if($(this).hasClass('active')){ 
     $('.rbox').removeClass('active'); 
    } 
    else{ 
     $('.rbox').removeClass('active'); 
     $(this).addClass('active'); 
    } 
}; 

Другое дело, что предупреждение не отображается даже функция прекрасно работает, но только с разрезах не сноска. Что я делаю неправильно? Спасибо за вашу помощь ...

Answer 1

Используйте $(document).ready(inicio); вместо $(document).on('ready',inicio);

Your Demo и working demo

Answer 2

пожалуйста, попробуйте ниже способ использовать код

$(document).ready(function(){ 
/////^^^^^^^^^^use ready like this way 
inicio(); 
}); 

function inicio(){ 
    var bodyHeight = $("body").height(); 
    var vwptHeight = $(window).height(); 

    if(vwptHeight > bodyHeight){ 
     $("footer#bottom").css("position", "absolute").css("bottom", 0); 
    } 

    $('.rbox').on("click", function(){despliegue}); 
    $('footer#bottom').on("click", function(){ 
     $("footer#bottom").css("background", "red"); 
    }); 

} 

function despliegue(){ 
    alert("hola"); 
    if($(this).hasClass('active')){ 
     $('.rbox').removeClass('active'); 
    } 
    else{ 
     $('.rbox').removeClass('active'); 
     $(this).addClass('active'); 
    } 
} 

Answer 3

вместо того, чтобы использовать тег вы можете использование

<div id="footer">Footer Here.</div> 

и сделать операцию на том, что, как

#footer { 

высота: 330px; положение: относительная; }