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

【问题标题】：Javascript / Jquery function stalling after initial / first click - unbind()Javascript/Jquery 函数在初始/第一次点击后停止 - unbind()
【发布时间】：2025-12-18 12:05:01
【问题描述】：

www.bobbysimmonspro.com

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

现在我想在多维数据集本身上使用引导导航栏。但是，我的 javascript 函数在初始点击后不起作用。我已经使用开发人员工具来检查元素，它似乎在旋转/函数之后保持相同的 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');
            }
      });

});

【问题讨论】：

我已经粘贴了代码的内容。感谢您的观看！

标签： javascript php jquery twitter-bootstrap include

【解决方案1】：

好的，我找到了答案！

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

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

我在我的 js 函数的末尾添加了这个小 sn-p。

据此帖jQuery.click() vs onClick

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

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

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

谢谢！

【讨论】：