javascript - 如何在 JavaScript 中创建对话框？

Question

目标是创建一个类似于 stackoverflow 上的标志对话框，单击问题下的“标志”按钮即可显示该对话框，但由于我是网络开发新手，所以我不明白某些事情。

这就是我所拥有的:

1. 这是按钮的标记:

   <a id="flag-post-2239985" title="flag this post for serious problems">flag</a>
   

   -我不明白这是如何执行事件的，通常有一个onclick标签。它是如何进入脚本的？

2. 这是外部 js，包含接受答案、投票和标记帖子的功能: http://sstatic.net/so/js/question.js?v=6274

   您可以将其取消缩小以便更好地查看 http://jsbeautifier.org/

3. 所需功能:

   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 文件中包含外部函数时，添加按钮标签，单击按钮没有任何反应

问题:

1. 我哪里做错了？
2. 按钮标记与javascript有什么关系(我不明白如果没有onclick标记它如何触发事件)？
3. 你会如何在 stackoverflow 上调试这个？我使用 Firebug，但无法设置任何断点。请透露更好的 javascript 调试器和(最终)编辑器。

如果可能，请详细描述，我是网络开发新手。

提前谢谢您!

Answer 1

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

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

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