Question

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

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

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

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

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

BTW，我正在使用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变量首先指向错误的帖子

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

Answer 1

首先引起我注意的是：ID应该是唯一的。将A标签的ID更改为类，并查看是否将其清除。

Answer 2

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

将其更改为

 var post = $(this);

等

Answer 3

您应该使用jQuery的live事件绑定到表单，而不是在创建后将单击绑定到每个按钮。

我在您的脚本中发布了update

我基本上拉出了表单点击功能并将它们转换为实时功能

$(".cancel").live("click", function(){
    $(this).closest(".post-comment-form").slideUp('',function(){ $(this).remove(); });
});
$(".preview").live("click", function(){
    // Hier muss mit Ajax und der Datenbank gespielt
    // werden um ein preview erstellen zu können
});
$(".submit").live("click", function(){
    // Hier muss mit Ajax und der Datenbank gespielt
    // werden um den Post abschicken zu können
});

我没有使用你的post.triggerHandler("destroyForm");功能，因为坦率地说我之前从未使用过它而且我无法让它工作大声笑。

Answer 4

当你使用像'#something'这样的jQuery选择器时，库使用“document.getElementById（）”来查找元素。如果您对多个元素使用相同的“id”值，那么不能期望事情有效;事实上，你会像你描述的那样得到完全的结果。您使用“find（）”来查找共享“id”元素的事实并不重要。

除了这个问题之外，你还需要为表单输入字段使用“name”属性。

Answer 5

您无需将ID更改为类。你只需要为每个元素提供唯一的ID，这样你就可以得到正确的ID。

简单的测试页面中奇怪的Javascript Bug（jQuery）

5 个答案: