javascript - 在 html 表单焦点和模糊上显示/隐藏 div？

Question

我试图在用户点击 html 表单输入“文本”(聚焦)然后隐藏模糊时显示一个 div。

它有效，但出于某种原因，div 在用户甚至单击文本输入字段之前就显示出来了。我试图让它只在用户关注文本字段时显示，并在他们点击离开时隐藏？

有人可以告诉我哪里出错了吗？谢谢

<script>
    $(".infobox-profile").hide();

    $("#text").focusin(function() {
        $(".infobox-profile").show();
    }).focusout(function () {
        $(".infobox-profile").hide();
    });
    </script>

    <div class="infobox-profile">hello</div>

Answer 1

将您的代码放入 $(function() { ... }

<script>
$(function() {
    $(".infobox-profile").hide();

    $("#text").focusin(function() {
        $(".infobox-profile").show();
    }).focusout(function () {
        $(".infobox-profile").hide();
    });
});
</script>

您的 JavaScript 可能在 infobox-profile 成为 DOM 的一部分之前执行。

工作示例

http://jsfiddle.net/bikeshedder/KxMcy/