Question

我正在尝试在用户点击div元素时显示工具提示。我发现this小提琴使用动态创建的div，但是当我点击它时它不显示。我在这里做错了什么？

$(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();
    }
});

Answer 1

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

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

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

Answer 2

Example on jsFiddle

您正在使用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();
    }
});

来自添加$newDiv.appendTo("body");的appart还要注意var

声明中的$newDiv

Answer 3

您需要在dom中的某处插入$newDiv。例如$('body').append($newDiv)

此外，$ newDiv是隐含的全局，它不应该是。请改用var $newDiv = ...。

动态创建的div不会显示

3 个答案: