简单的Testpage中奇怪的JavascriptBug(jQuery)

我正在编写Mediawiki扩展程序.我实际上处于非常早期阶段;).你可以在这里找到代码(好吧,我只能提交一个链接,所以想象一下github网址)/ eugenkiss / discussion-extension

我有一个奇怪的jQuery问题,即使使用firebug并尝试调试我的代码,我也无法解决.我已经上传了当前的代码和示例：http://jsfiddle.net/NMpU5/

尝试打开讨论并点击至少两个“回复”链接.然后单击出现的第一个表单的取消按钮.我不知道为什么,但当你点击取消按钮时,另一个表格将被关闭而不是所需的表格.

您也可以改变这一点.例如,打开两个表单并关闭最后一个表单.起初它似乎工作.但是,当您尝试关闭其他表单(通过单击取消)时,它不会消失.但是,事件是由firebug所示触发的.有时,当我在那之后点击另一个回复锚点时,将会打开尽可能多的表单,因为我点击了另一个表单中看似无效的取消按钮.

那么,对于我想要的扩展,我当然可以将打开的表单的存在限制为一个 – 为什么还需要打开两个或更多？但我只想找到该死的虫子,因为我已经投入了大量时间来寻找它！对你来说这是一个宝贵的错误,你知道;)

顺便说一下,我正在使用jQuery 1.4.2

Javascript的


$(document).ready(function() {
// Hide the discussion bodys per default
$(".discussion").addClass("closed")
.children(".discussion-body").hide();
// Register two custom events for the individual discussion divs
// "open" & "close" in order to make the discussion bodys
// collapsable and be able to toggle the events by clicking
// the "discussion-header-button" anchor
$(".discussion")
.bind("open", function(e) {
if(!$(this).hasClass("opened")) {
$(this).children(".discussion-body").slideDown();
$(this).find(".discussion-header-button").html("[-]");
$(this).addClass("opened");
$(this).removeClass("closed");
}
})
.bind("close", function(e) {
if(!$(this).hasClass("closed")) {
$(this).children(".discussion-body").slideUp();
$(this).find(".discussion-header-button").html("[+]");
$(this).addClass("closed");
$(this).removeClass("opened");
}
})
.find(".discussion-header-button").click(function(){
relatedDiscussion = $(this).parents(".discussion");
if(relatedDiscussion.hasClass("closed")) {
relatedDiscussion.trigger("open");
}
else if(relatedDiscussion.hasClass("opened")) {
relatedDiscussion.trigger("close");
}
});
// Register custom "showForm" & "destroyForm" events on posts
// in order to make the "Reply" button work
// TODO: Maybe add "preview" & "submit"
$(".discussion-body .post")
.bind({
showForm: function(){
post = $(this);
postBody = post.find(".post-body").first();
postHeader = post.find(".post-header").first();
postBody.append(postCommentFormHtml);
replyLink = postHeader.find(".reply");
replyLink.unbind();
form = postBody.find(".post-comment-form");
form.slideDown();
// create actions for the form buttons
form.find(".cancel").click(function(){post.triggerHandler("destroyForm");
});
form.find(".preview").click(function(){// Hier muss mit Ajax und der Datenbank gespielt// werden um ein preview erstellen zu k?nnen
});
form.find(".submit").click(function(){// Hier muss mit Ajax und der Datenbank gespielt// werden um den Post abschicken zu k?nnen
});
},
destroyForm: function(){
post = $(this);
postBody = post.find(".post-body").first();
postHeader = post.find(".post-header").first();
replyLink = postHeader.find(".reply");
replyLink.click(replyAction);
form = postBody.find(".post-comment-form");
form.slideUp(function(){ $(this).remove();
});
}
});
//$(".discussion-post-comment").click(createPostCommentForm);
$(".discussion .reply").click(replyAction);
function replyAction(event){
// Note: It is important to use triggerHandler instead of trigger
// otherwise the "showForm" event of all parents is triggered
// recursively (bubbling) and this is not desired
event.preventDefault();
relatedPost = $(this).parents(".post").first();
relatedPost.triggerHandler("showForm");
}
});
postCommentFormHtml = "\


HTML

编辑：
我想补充说,将id更改为类并没有帮助.另外,如果这有助于你：我发现(使用Firebug)“post”(因此“postbody”)变量(在“destroyForm”事件中)实际上指向错误的帖子,因此删除了错误的表单.但是,为什么post变量首先指向错误的帖子

EDIT2：
将所有ID更改为类http://jsfiddle.net/NMpU5/1/

解决方法:

它看起来好像你的事件处理函数中的许多变量(特别是“post”和“relatedDiscussion”)在每个函数中都没有用“var”声明.我试图弄明白可能会做些什么,但我感到困惑.然而,当你没有声明你的局部变量时,它们就是全局变量.这意味着将“post”设置为等于某个新值的每个函数都会更改“post”在所有其他可能处于活动状态的函数所使用的值.

将其更改为

var post = $(this);


等等