Question

为什么我点击“关闭”div，不显示“基本文字”？总之，为什么不工作第二次“点击”功能？

<!DOCTYPE html>
    <html>
    <head>  
        <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $("#sp").click(function(){
                $("#info").html("<div><div id='close'>Close</div><div>new text</div></div>");
            });

            $("#close").click(function(){
                $("#info").html("<div>basic text</div>");
            });
        });
        </script>
        <style>
        </style>
    </head>
    <body>
    <p id="sp">Click</p>
    <div id="info">
        <div>basic text</div>
    </div>
    </body>
    </html>

Answer 1

您需要live()功能：

$("#sp").click(function(){
    $("#info").html("<div><div id='close'>Close</div><div>new text</div></div>");
});

$("#close").live('click', function(){
    $("#info").html("<div>basic text</div>");
});

在附加了单击事件处理程序之后创建了具有标识closed的元素（在这种情况下为空）。您需要确保它还将附加到动态创建的元素。为此，您可以使用live()

Answer 2

事件泡沫，因此您可以直接在info上放置一个处理程序，以查找ID为close的元素。

$(document).ready(function(){
    $("#sp").click(function(){
        $("#info").html("<div><div id='close'>Close</div><div>new text</div></div>");
    });

    $("#info").click(function(e){
        if( e.target.id === "close" ) {
            $(this).html("<div>basic text</div>");
        }
    });
});

作为替代方案，您可以使用delegate()^(docs)，这基本上是相同的。

$(document).ready(function(){
    $("#sp").click(function(){
        $("#info").html("<div><div id='close'>Close</div><div>new text</div></div>");
    });

    $("#info").delegate('#close','click',function(e){
        $(this).parent().html("<div>basic text</div>");
    });
});

最终，最好的解决方案是在加载时在页面上标记所有标记，并在必要时只显示show()^(docs)和hide()^(docs)。这比破坏和重新创建可重用内容要好得多。

Answer 3

因为设置了点击后不存在关闭。请改用实时功能。

$("#close").live("click", function(){
  $("#info").html("<div>basic text</div>");
});

Answer 4

因为close元素是动态添加的，并且在页面加载时不存在于DOM中。

如果您稍微修改一下代码，请：

$("#close").live('click',
    function(){
        $("#info").html("<div>basic text</div>");
});

它应该可以正常工作。

live()允许事件绑定到DOM中尚未创建/存在的元素。

jquery：两次点击功能

4 个答案: