0

当用户单击 div 元素时，我试图显示工具提示。我发现这个小提琴使用了一个动态创建的 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();
    }
});
4

3 回答 3

1

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

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

newDiv.appendTo($('body'));
$('.tooltip').fadeIn().css(({ left:  e.pageX, top: e.pageY }));
于 2013-06-03T07:28:46.123 回答
1

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");还介意var$newDiv

于 2013-06-03T07:31:07.163 回答
0

你需要$newDiv在dom中的某个地方插入。例如$('body').append($newDiv)

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

于 2013-06-03T07:32:57.093 回答