jQuery不能识别一个div中的点击事件，但可以识别另一个

Question

So i have this 4 sections, well there are 3 and 1 footer in my html, and jquery applies a css class when they're clicked, the problem is that the footer which btw is a sticky footer using jquery as well, doesn't recognize even the click event.

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

Here's the js:

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

Another thing is that the alert doesn't show even the function works perfectly but only with the sections the footer not. What am i doing wrong?? Thanx for your help...

Answer 1

please try the below way to use your code

$(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 2

Use $(document).ready(inicio); instead of $(document).on('ready',inicio);

Your Demo and working demo

Answer 3

instead of using tag you can use

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

and do operation on that like

#footer {

height: 330px;position: relative; }