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

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

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

Answer 3

这是一个不起作用的简单原因。当你加载页面时调用你的javascript，没有closebutton id，所以这个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");

            });
            }
        });

更新了小提琴：http://jsfiddle.net/6vg3tzcz/3/

JQuery没有检测动画的DIV id的变化

3 个答案: