このコードは、HTML コードの $.get リクエストを呼び出す #story-comments-text 別の div (#comments-popup) にアクセスしたときに表示されるように記述しました。
この部分はうまく機能します。
$.post リクエストを呼び出すときに問題が発生しました。
#comments-popup は、$.post() を呼び出す送信ボタンによって更新されます。リクエストはうまく機能しますが、div の更新後、マウスをその上に移動すると、最初の #comments-popup の下部がたくさん表示されます。問題はどこだ?どうすれば解決できますか?私はまだajaxの初心者です。英語が下手でごめんなさい!
$("#story-comments-text").mouseenter(function()
{
var popupdiv="<div id='comments-popup'></div>";
var href = jQuery(location).attr('href');
var newHref=href+"&comment=1";
if($("comments-popup").is(":visible"))
{
$("comments-popup").remove();
}
$.get
( newHref,
function(data)
{
$("#story-comments-text").append(popupdiv);
$("#comments-popup").css("display", "none");
$("#comments-popup").html(data);
$("#comments-popup").fadeIn();
$("#story-comment-submit").click(function(e)
{
e.preventDefault();
var href = jQuery(location).attr('href');
var newHref=href+"&comment=1&addcomment=1";
var comment=$("#story-comment-form #story-comment-form-text").val();
$.post
(
newHref,
{
"comment":comment
},
function(data)
{
if(data)
{
$("#comments-popup").remove();
$("#comments-popup").css("display", "none");
$("#comments-popup").html(data);
$("#comments-popup").fadeIn();
}
}
);
});
}
);