javascript - 简单测试页中的奇怪 Javascript Bug (jQuery)

Question

我正在编写 Mediawiki 扩展。我实际上处于非常非常早期的阶段；)。你可以在这里找到代码(好吧，我只能提交一个链接，所以想象一个 github url)/eugenkiss/discussion-extension

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

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

您也可以改变它。例如，打开两个窗体并关闭最后一个打开的窗体。起初它似乎工作。但是当您尝试关闭另一个窗体(通过单击取消)时，它不会消失。但是，如 Firebug 所示，事件被触发。有时，当我在那之后单击另一个回复 anchor 时，打开的表单会与我单击另一个表单看似不起作用的取消按钮一样多。

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

顺便说一句，我正在使用 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 = "\
    <div class='post-comment-form' style='display:none;'><br>\
    <form action='textarea.htm'>\
        <textarea name='post' cols='50' rows='8'></textarea>\
        <br>\
        <input class='submit' type='submit' value=' Post '>\
        <input class='preview' type='submit' value=' Preview '>\
        <input class='cancel'type='reset' value=' Cancel '>\
    </form>\
    </div>";​

HTML

<div class="discussion">
<div class="discussion-header">
    <a class="discussion-header-button">[+]</a>
    Diskussion: 3 Kommentar(e)
    <a class="discussion-post-comment">Post Comment</a>
</div>
<div class="discussion-body">
<div class="post">
    <div class="post-header">
        <span class="post-header-name">Eugen</span>
        <span class="post-header-date">2010-02-25 12:32:30</span>
        <a class="reply" href="#">Reply</a>
        <a class="edit" href="#">Edit</a>
        <a class="delete" href="#">Delete</a>
    </div>
    <div class="post-body">
        Ich denke das sollte anders sein!
    </div>
    <div class="post">
        <div class="post-header">
            <span class="post-header-name">Markus</span>
            <span class="post-header-date">2010-02-25 12:32:31</span>
            <a class="reply" href="#">Reply</a>
         <a class="edit" href="#">Edit</a>
         <a class="delete" href="#">Delete</a>
        </div>
        <div class="post-body">
            Ich denke nicht
        </div>
    </div>
</div>
<div class="post"> 
    <div class="post-header">
        <span class="post-header-name">Jan</span> 
        <span class="post-header-date">2010-03-25 12:32:30</span>
        <a class="reply" href="#">Reply</a>
        <a class="edit" href="#">Edit</a>
        <a class="delete" href="#">Delete</a>
    </div>
    <div class="post-body">
        Mal was ganz anderes: Denkt ihr das selbe was ich denke?
    </div>
</div>
</div>
</div>

编辑: 我想补充一点，将 id 更改为类没有帮助。另外，如果这对您有帮助:我发现(使用 Firebug)“post”(因此是“postbody”)变量(在“destroyForm”事件中)实际上指向错误的帖子，因此删除了错误的表格。但我无法理解为什么 post 变量首先指向错误的帖子

编辑2: 将所有 ID 更改为类 http://jsfiddle.net/NMpU5/1/

Answer 1

在我看来，您的事件处理函数中的许多变量(尤其是“post”和“relatedDiscussion”)在每个函数中都没有用“var”声明。我试图弄清楚那到底能做什么，但我很困惑。然而，当您不声明局部变量时，它们就是全局变量。这意味着将“post”设置为某个新值的每个函数都在更改“post”在所有其他可能处于事件状态的函数中使用的值。

改成

 var post = $(this);

等等