Javascript / Jquery function stalling after initial / first click - unbind()

Question

www.bobbysimmonspro.com

So, i've got this rotating box thing worked out. It just changes the class of the container div with different transform values for each option.

Now i want to utilize a bootstrap navbar on the cube itself. However,my javascript function does not work after the initial click. I've used developer tools to inspect the element, and it seems to maintain the same id after the rotation/function. However, if i set the event listener to"body" it will execute the function on each click. Can anyone help me resolve the gaps in my understanding of this process? If the element has the same ID why doesn't the JS function execute whether the nav is outside or inside the div that's being manipulated by the function?

index:

<div class="container">
    <div id="page">

        <section class="displayCont">
            <div id="cube" class="show-front">
              <div id="frontFace" class="front cubeFace">
                <?php include ("front.php");?>
              </div>
              <div id="backFace" class="back cubeFace"></div>
              <div id="rightFace" class="right cubeFace"></div>
              <div id="leftFace" class="left cubeFace"></div>
              <div id="topFace" class="top cubeFace"></div>
              <div id="bottomFace" class="bottom cubeFace"></div>
            </div>
        </section>

    </div>
</div>

Script:

$( document ).ready(function() {

    var panelClassName = 'show-front';

    $("#cube").toggleClass("backFace");

    $("#show-buttons").on('click', '*', function() {

        $(".cubeFace").empty();

        var activePanel = "show-" + event.target.id;

        setTimeout(function(){ 
            $("#cube").animate({opacity: .3});
        }, 500);

        setTimeout(function(){ 
            $("#cube").removeClass("backFace");
        }, 750);

        setTimeout(function(){ 
            $("#cube").removeClass( panelClassName );   
            panelClassName = activePanel;
            $("#cube").addClass( panelClassName );
        }, 1500);


        setTimeout(function(){      
            $("#cube").addClass("backFace");
        }, 2500);

        setTimeout(function(){      
            $("#cube").animate({opacity: 1});
        }, 2750);

        var vortex = event.target.id + ".php";
        var torus = "#" + event.target.id + "Face";

        setTimeout(function(){
            $.ajax({
                url: vortex,
                cache: false
            })
            .done(function( html ) {
                $( torus ).html( html );
            });
        }, 3000);

        $("body").click(function(event) { alert (event.target.id); });
        $("body").click(function(event) { alert (event.target.className); });

    });

    $("body").click(function(event) {
            // only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
             if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
                $('.navbar-collapse').collapse('toggle');
            }
      });

});

I've pasted in the meat of the code. Thanks for taking a look! — RedBeardPro, Oct 15 '15 at 02:47

score 0 · Accepted Answer · edited May 23 '17 at 12:29

Ok, so i found the answer!

It took me probably 3-4 hrs of snooping on stackoverflow, but it found it!

$("#show-buttons").unbind();

I added this little snippet to the end of my js function.

according to this post jQuery.click() vs onClick

"The problem with the DOM element properties method is that only one event handler can be bound to an element per event."

I still dont fully comprehend what's happening here, but it seems to have resolved my issue.

If anyone else has some helpful insight on the mechanics i'm sure i'd be helpful to others down the road.

Thanks!

Javascript / Jquery function stalling after initial / first click - unbind()

1 Answers1