Question

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

});

Answer 1

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

我花了3-4个小时监听stackoverflow，但它找到了它！

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

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

根据这篇文章jQuery.click() vs onClick

＆＃34; DOM元素属性方法的问题在于每个事件只能绑定一个元素。＆＃34;

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

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

谢谢！

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

1 个答案: