JQuery 未检测到 DIV 动画 ID 的变化

Question

我正在创建一个滑动打开的导航侧边栏，但我无法让我的 JQuery 识别出 div 的 ID 发生了变化。

检查元素时，我可以看到 id 实际上更改为 closebutton，但单击它时会执行 openbutton.click 脚本。

我已经向控制台添加了一些测试计数器 - 非常感谢任何指导！

HTML

<body>
    <div id="nav">   
        <div id="openbutton">
        </div>    
    </div>
</body>

CSS

#nav {
    position: fixed;
    top: 0px;
    left: -50%;

    margin-left: 50px;

    width: 50%;
    height: 100%;

    background-color: yellow;
}

#openbutton  {
    position: absolute;
    top: 0px;
    right: 0px;

    height:50px;
    width:50px;

    background-color: black;
}

#closebutton {
    position: absolute;
    top: 0px;
    right: 0px;

    height:50px;
    width:50px;

    background-color: blue;
}

JS

        $(document).ready (function() {
            $( "#openbutton" ).click(function() {
                console.log( "1" );
                $( "#nav" ).animate({left: "0", marginLeft: 0});
                console.log( "2" );
                $( "#nav" ).animate({left: "-10", marginLeft: 0} );
                console.log( "3" );
                $("#openbutton").attr("id", "closebutton");
            });

            $( "#closebutton" ).click(function() {
                console.log( "4" );
                $( "#nav" ).animate({left: "-50%", marginLeft: 40}, "slow" );
                console.log( "5" );
                $( "#nav" ).animate({left: "-50%", marginLeft: 50}, "slow" );
                console.log( "6" );
                $("#closebutton").attr("id", "openbutton"); 
            }); 
        });

Answer 1

使用 on 事件在实时 dom 元素上附加事件 - 如下所示 -

 $(document).ready (function() {

        $( "#nav" ).on('click','#openbutton',function() {
            console.log( "1" );
            $( "#nav" ).animate({left: "0", marginLeft: 0});
            console.log( "2" );
            $( "#nav" ).animate({left: "-10", marginLeft: 0} );
            console.log( "3" );
            $("#openbutton").attr("id", "closebutton");
        });

        $( "#nav" ).on('click','#closebutton',function() {
            console.log( "4" );
            $( "#nav" ).animate({left: "-50%", marginLeft: 40}, "slow" );
            console.log( "5" );
            $( "#nav" ).animate({left: "-50%", marginLeft: 50}, "slow" );
            console.log( "6" );
            $("#closebutton").attr("id", "openbutton");

        });

    });

jsfiddle http://jsfiddle.net/6vg3tzcz/4/

Answer 2

尽管我认为最好的方法是使用 class。问题是绑定时间，你必须使用 .on() 才能工作

   $(document).on("click","#openbutton" function() {});  
   $(document).on("click","#closebutton" function() {});

Answer 3

这不起作用的原因很简单。当你在页面加载时调用你的javascript时，没有closebuttonid，所以这个jQuery基本上没有意义。

您可以将其设置为仅在单击 openbutton 时调用脚本的这一部分，如下所示：

$(document).ready (function() {

            $( "#openbutton" ).click(function() {
                console.log( "1" );
                $( "#nav" ).animate({left: "0", marginLeft: 0});
                console.log( "2" );
                $( "#nav" ).animate({left: "-10", marginLeft: 0} );
                console.log( "3" );
                $("#openbutton").attr("id", "closebutton");
                closeit();
            });
            function closeit(){
            $( "#closebutton" ).click(function() {
                console.log( "4" );
                $( "#nav" ).animate({left: "-50%", marginLeft: 40}, "slow" );
                console.log( "5" );
                $( "#nav" ).animate({left: "-50%", marginLeft: 50}, "slow" );
                console.log( "6" );
                $("#closebutton").attr("id", "openbutton");

            });
            }
        });

已更新 fiddle：http://jsfiddle.net/6vg3tzcz/3/

JQuery 未检测到 DIV 动画 ID 的变化

JQuery not detecting change in DIV id for animation

html

javascript

css

jquery

jquery-animate