Question

目标是创建一个类似于stackoverflow上的标志对话框，单击位于问题下的“标记”按钮，但由于我是Web开发的新手，我不明白某些事情。

这就是我所拥有的：

这是按钮的标记：
```
<a id="flag-post-2239985" title="flag this post for serious problems">flag</a>
```
- 我不明白这是如何执行一个事件的，通常会有一个onclick标签。它怎么去剧本？
这是包含接受答案，投票和举报帖子的函数的外部js： http://sstatic.net/so/js/question.js?v=6274

您可以在http://jsbeautifier.org/

需要的功能：

flag: function (F) {
    var D = F.attr("id").substring("flag-post-".length);
    var K = "form-flag-" + D;
    var N = $("#" + D + "-is-owned-by-current-user").length > 0;
    var L = [
        [l.offensive, "Offensive, Abusive, or Hate Speech", !N],
        [l.spam, "Spam", !N],
        [l.informModerator, "Requires Moderator attention", true]
    ];
    var I = '<div class="popup flag-menu"><h2>Please flag with care:</h2>';
    I += '<div class="flag-reasons"><form id="' + K + '">';
    for (var G = 0; G < L.length; G++) {
        if (L[G][2]) {
            var M = "flag-radio" + D + "-" + L[G][0];
            I += '<input type="radio" id="' + M + '" name="flag-' + D + '" value="' + L[G][0] + '">';
            I += '<label for="' + M + '">' + L[G][1] + "</label><br>"
        }
    }
    I += '<div class="flag-comment">Why are you flagging this post?<textarea name="flag-reason" cols="33" rows="4"></textarea>';
    I += '<br><span class="text-counter"></span></div>';
    I += "</form></div>";
    I += '<input type="button" class="flag-cancel" value="Cancel"><input type="button" class="flag-submit" value="Flag Post">';
    I += "</div>";
    var H = $(I);
    var E = H.find("#" + K);
    var J = E.find("textarea");
    E.find("input").click(function () {
        var O = E.find("div.flag-comment");
        var P = vote.flagIsInform(E);
        O.toggle(P);
        if (P) {
            J.focus()
        }
        vote.flagAllowSubmit(H, J, P)
    });
    J.charCounter({
        min: 10,
        max: 150,
        setIsValid: function () {
            vote.flagAllowSubmit(H, J, vote.flagIsInform(E))
        }
    });
    H.find(".flag-submit").click(function () {
        if (vote.flagIsInform(E) && !vote.flagTextValid(J)) {
            return
        }
        vote.flagSubmit(F, D, E, J)
    });
    H.find(".flag-cancel").click(function () {
        vote.flagClosePopup(F)
    });
    F.parent().append(H);
    H.fadeIn("fast")
},
flagIsInform: function (D) {
    var E = D.find("input:radio:checked");
    if (E.length == 0) {
        return false
    }
    return E.val() == l.informModerator
},
flagAllowSubmit: function (E, F, G) {
    var D = G ? vote.flagTextValid(F) : true;
    E.find(".flag-submit").toggle(D)
},
flagTextValid: function (E) {
    var D = E.val().length;
    return (D >= 10 && D <= 150)
},
flagClosePopup: function (D) {
    D.parent().find(".popup").fadeOut("fast", function () {
        $(this).remove()
    })
},
flagSubmit: function (G, E, D, H) {
    vote.flagClosePopup(G);
    var F = D.find("input:radio:checked").val();
    var E = G.attr("id").substring("flag-post-".length);
    if (F == l.informModerator) {
        $.ajax({
            type: "POST",
            url: "/messages/inform-moderator-about-post/" + E,
            dataType: "json",
            data: {
                fkey: fkey,
                msg: H.val()
            },
            success: function (I) {
                showAjaxError(G.parent(), I.Message)
            },
            error: function (I, K, J) {
                showAjaxError(G.parent(), (I.responseText && I.responseText.length < 100 ? I.responseText : "An error occurred during submission"))
            }
        })
    } else {
        q(G, E, F, vote.flagSubmitCallback, {
            comment: H.val()
        })
    }
},
flagSubmitCallback: function (E, D, G) {
    if (G && G.Success) {
        if (G.Message) {}
    } else {
        var F = E.parent();
        if (G && G.Message) {
            showAjaxError(F, G.Message)
        } else {
            showAjaxError(F, "A problem occurred during flagging")
        }
    }
}

问题：当我在新的html文件中包含外部函数时，添加按钮的标记，单击按钮不执行任何操作

问题：

我在哪里做错了？
按钮标记与javascript有什么关系（如果没有onclick标记，我不明白它如何触发事件）？
你将如何在stackoverflow上调试它？我使用Firebug，但我无法设置任何断点。请为javascript显示更好的调试器和（最终）编辑器。

如果可能，请详细说明，我是网络开发的新手。

提前谢谢！

Answer 1

您还应该从源代码中注意到SO使用jQuery，这是一个javascript框架..

您可以使用jquery将处理程序绑定到DOM中的特定事件，如

$('#flag-post-2239985').click(
           function() { 
                        /*executes when someone clicks on the flag button.*/ 
                      } 
           );

Answer 2

据我所知，SO正在使用一些jQuery稍后添加处理程序。

var A=function(){return $("div.post-menu a[id^='flag-post-']")};

此函数返回ID为“flag-post-”的链接，即标记按钮。

稍后它将使用它来添加一个我很确定的处理程序。由于SO的代码相当混淆，你最好从头开始编写代码，而不是试图弄清楚SO正在做什么。

这不应该太难。要么手动添加处理程序，要么使用像上面这样的小jQuery添加.click“处理程序”。或者，天堂禁止，使用一些普通的旧JavaScript，甚至添加一个onclick属性到您的链接。：）

在回答＃3时，使用任何调试器都很难跟踪这段代码，因为你将逐步完成大量的jQuery代码。你很快就会忘记实际发生的事情。同样，您最好还是模仿行为而不是复制确切的功能。

如何在javascript中创建对话框？

2 个答案: