初始/第一次单击后Javascript / Jquery函数停止 - unbind（）

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.

所以,我已经解决了这个旋转盒子的问题。它只是使用每个选项的不同变换值更改容器div的类。

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?

现在我想在立方体本身上使用引导导航栏。但是,我的javascript函数在初始点击后不起作用。我使用了开发人员工具来检查元素,它似乎在旋转/函数后保持相同的id。但是,如果我将事件监听器设置为“body”,它将在每次单击时执行该功能。任何人都可以帮我解决我对这个过程的理解上的差距吗?如果元素具有相同的ID,为什么JS函数不会执行导航是在函数操作的div外部还是内部?

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

});

1 个解决方案

#1

Ok, so i found the answer!

好的,所以我找到了答案!

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

我花了3-4个小时窥探*,但它找到了它!

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

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

我将这个小片段添加到我的js函数的末尾。

according to this post jQuery.click() vs onClick

根据这篇文章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."

“DOM元素属性方法的问题是每个事件只能将一个事件处理程序绑定到一个元素。”

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!

#1