Javascript 动态创建的div不'；我没有出现

我试图在用户单击div元素时显示工具提示。我找到了使用动态创建的div的fiddle，但当我点击它时，它并没有显示出来。我做错了什么

$(document).ready(function(){

    $('.somefield').click(showBox).mouseleave(hideBox);

    function showBox(e){
        $newDiv = $('<div></div>');
        $newDiv.addClass('tooltip');
        $newDiv.append('adfhadfhadfhadfh')
        $(newDiv).fadeIn().css(({ left:  e.pageX, top: e.pageY }));
    }

    function hideBox(){
        $('.tooltip').fadeOut();
    }
});

$（文档）.ready（函数（）{
$（'.somefield'）。单击（显示框）。鼠标移动（隐藏盒）；
功能展示箱（e）{
$newDiv=$（''）；
$newDiv.addClass（“工具提示”）；
$newDiv.append（'adfhadfhadfh'）
$（newDiv.fadeIn（）.css（{left:e.pageX，top:e.pageY}））；
}
函数hideBox（）{
$（'.tooltip'）.fadeOut（）；
}
});

您没有将div附加到DOM中的任何其他元素

var newDiv = $("<div>", {
        'class': "tooltip"   
    });

newDiv.appendTo($('body'));
$('.tooltip').fadeIn().css(({ left:  e.pageX, top: e.pageY }));

var newDiv=$（“”{
“类”：“工具提示”
});
newDiv.appendTo（$（'body'））；
$（'.tooltip'）.fadeIn（）.css（{left:e.pageX，top:e.pageY}））；

您正在使用jQuery创建一个div，然后尝试在jQuery对象中包装一个现有的对象。将

$（newDiv）

更改为

$newDiv

它不会显示，因为您需要将其添加到文档中，您可以将其附加到正文中

$newDiv.appendTo("body");

如果要淡入，则必须首先隐藏该元素

$newDiv.css("display", "none");

固定代码如下所示

$(document).ready(function(){

    $('.somefield').click(showBox).mouseleave(hideBox);

    function showBox(e){
        var $newDiv = $('<div></div>');
        $newDiv.css("display", "none");
        $newDiv.addClass('tooltip');
        $newDiv.append('adfhadfhadfhadfh')
        $newDiv.appendTo("body");
        $newDiv.fadeIn().css(({ left:  e.pageX, top: e.pageY }));
    }

    function hideBox(){
        $('.tooltip').fadeOut();
    }
});

$（文档）.ready（函数（）{
$（'.somefield'）。单击（显示框）。鼠标移动（隐藏盒）；
功能展示箱（e）{
变量$newDiv=$（''）；
$newDiv.css（“显示”、“无”）；
$newDiv.addClass（“工具提示”）；
$newDiv.append（'adfhadfhadfh'）
$newDiv.appendTo（“正文”）；
$newDiv.fadeIn（）.css（{left:e.pageX，top:e.pageY}））；
}
函数hideBox（）{
$（'.tooltip'）.fadeOut（）；
}
});

---

添加

$newDiv.appendTo（“正文”）后的附件

还要注意

$newDiv

声明中的

var

，您需要在dom中的某个地方插入

$newDiv

。例如

$（'body'）.append（$newDiv）

---

此外，$newDiv是隐式全局的，这是不应该的。使用

var$newDiv=…

。

对于初学者来说，该小提琴抛出了一个脚本错误：未捕获引用错误：newDiv未定义该小提琴有太多错误，我不知道从哪里开始。请清理这些麻烦（使用资源面板，去掉html中的jquery脚本，修复jquery.$（newDiv）.fadeIn（）.css（{left:e.pageX，top:e.pageY}））；您使用的是newDiv而不是$newDiv wihch被声明为变量名为什么不使用jquery的

hide（）

？另外，堆叠函数。没有理由。它可以被使用。我堆叠不是为了让OP熟悉它，所以他可以看到我添加的一些更改。理由足够充分，尽管提供替代方案可能也很有用-所以OP了解它。