動態創建的div不會顯示

我想在用戶點擊div元素時顯示工具提示。我發現this小提琴在哪裏使用動態創建的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(); 
    } 
});

來源

2013-06-03 Imesh Chandrasiri

對於初學者來說，那個小提琴會拋出一個腳本錯誤：*未捕獲的ReferenceError：newDiv沒有被定義* – Snixtor

這個小提琴有太多的錯誤，我不知道從哪裏開始。請清理小提琴（使用資源面板，在html中刪除jquery腳本，修復你的jquery。） –

$（newDiv）.fadeIn（）.css（（{left：e.pageX，top：e.pageY}））;你正在使用newDiv而不是$ newDiv wihch被聲明爲變量名 – bitkot

Example on jsFiddle

您正在使用jQuery來創建一個div再後來嘗試在一個jQuery對象包裝一箇中存在的對象。將$(newDiv)更改爲$newDiv。

它不會顯示出來，因爲你需要添加它的文檔，你可以追加到身體

$newDiv.appendTo("body");

如果您正在衰落，該元素必須首先被隱藏

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

所以固定的代碼看起來像是從另外的一個$newDiv.appendTo("body");這

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

APPART也請注意var在$newDiv

來源

2013-06-03 07:31:07 BrunoLM

爲什麼不使用jQuery的'hide（）'？另外，堆棧函數。 –

沒有理由。可以使用。到OP，所以他可以看到我添加的一些變化。 – BrunoLM

足夠好的原因，但它也可以提供替代 - 因此OP瞭解它。 –

您不會將div附加到DOM中的任何其他元素。

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

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

來源

2013-06-03 07:28:46 kushyar

的聲明中您需要在0123的某個地方插入$newDiv。例如$('body').append($newDiv)

此外$ newDiv是隱含的全局，它不應該是。改爲使用var $newDiv = ...。

來源

2013-06-03 07:32:57 buritos

動態創建的div不會顯示

回答

相關問題