Javascript / Jquery 函数在初始/第一次点击后停止 - unbind()

Question

www.bobbysimmonspro.com

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

现在我想在多维数据集本身上使用 bootstrap 导航栏。但是，我的 javascript 功能在初始点击后不起作用。我已经使用开发人员工具检查了该元素，它似乎在 rotation/function 之后保持相同的 ID。但是，如果我将事件侦听器设置为 "body"，它将在每次单击时执行该功能。任何人都可以帮助我解决我对这个过程的理解上的差距吗？如果元素具有相同的 ID，为什么 JS 函数不执行导航是在函数操纵的 div 外部还是内部？

索引：

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

脚本：

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

});

Answer 1

好的，所以我找到了答案！

我大概花了 3-4 个小时在 Whosebug 上窥探，但它找到了！

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

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

根据这个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."

我仍然不完全理解这里发生了什么，但它似乎已经解决了我的问题。

如果其他人对机制有一些有用的见解，我相信我会对以后的其他人有所帮助。

谢谢！

Javascript / Jquery 函数在初始/第一次点击后停止 - unbind()

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

javascript

php

jquery

include

twitter-bootstrap