jquery - ポップアップ div を追加する、これは良い方法ですか?

Question

タイトルとして、私はちょうど次のコードを書きました...ポップアップdivを作成する良い方法ですか? 私の悪い英語でごめんなさい。

    $("#story-comments-text").mouseenter(function()
{
    var popupdiv="<div id='comments-popup'></div>";
    $(this).append(popupdiv);
    $.post()
    {
        //post request for popupdiv
    }
    return false;
}).mouseleave(function(){
    $("#comments-popup").remove();
});

Answer 1

$("#story-comments-text").mouseenter(function(){
    var popupdiv = "<div id='comments-popup'></div>",
        that = this; // that is reference of #story-comments-text
    $.post('url', data, function(data) {  // just a demo request, you will configure it
        if(data) {
           popupdiv.html(res);  // make process as you want
           that.append(popupdiv);
        }
    }, 'json');
}).mouseleave(function(){
    $("#comments-popup").remove();
});

Answer 2

スローモーションで =)

$("#story-comments-text").mouseenter(function() {
    var $this = this;
    $.post('server.php', { name: "John", time: "2pm" }, function(data) {
        $("<div id='comments-popup' style='display: none'></div>").html(data).appendTo($this);
        $('#comments-popup').show("slow");
    });
}).mouseleave(function(){
    $('#comments-popup').hide("slow", function(){
        $("#comments-popup").remove();
    });
});

Answer 3

$("#story-comments-text").mouseenter(function() {
    var $this = this;
    $.post('server.php', { name: "John", time: "2pm" }, function(data) {
        $("<div id='comments-popup'></div>").html(data).appendTo($this);
    });
}).mouseleave(function(){
    $("#comments-popup").remove();
});