Javascript 代码似乎执行了很多次，为什么？

Question

我尝试通过按钮在tinyMCE编辑器中插入Wordpress Shortocde，但遇到了一些问题。脚本多次插入短代码。我很难解释清楚，所以我录制了一个短视频:

http://www.youtube.com/watch?v=bJJMkAXKNVM

这是完整的 JavaScript 代码:

jQuery(document).ready(function($){

$("#wpwrap").append("<div class=\"avgrund-cover\"></div>");


$("#close-modal").click(function(){

Avgrund.hide("#acf-popup");

});     

(function() {
  tinymce.create('tinymce.plugins.acfshortcode', {
  init : function(ed, url) {
     ed.addButton('acfshortcode', {
        title : 'Ajax Contact Form',
        image : url+'/../acf-button.png',
        onclick : function() {


           var showname = true;
           var showsubject = true;
           var showbox = true;
           var formwidth = $("#form-width").val();

           Avgrund.show("#acf-popup");

              $("#disable_name").click(function(e){

                 if (showname) {
                    $("#name").parent().slideUp('200');
                    showname = false;
                 }else{
                     $("#name").parent().slideDown('200');
                    showname = true;
                 }

              });




              $("#close-modal").click(function(e){

                 Avgrund.hide("#default-popup");

              });


              $("#disable_subject").click(function(e){

                 if (showsubject) {
                    $("#subject").parent().slideUp('200');
                    showsubject = false;
                 }else{
                    $("#subject").parent().slideDown('200');
                    showsubject = true;
                 }
              });

              $("#disable_box").click(function(e){

                 if (showbox) {
                    $("#acf-contact-form").removeClass('acf-box');
                    showbox = false;
                 }else{
                    $("#acf-contact-form").addClass('acf-box');
                    showbox = true;
                 }

              });

              $("#form-width").keyup(function() {
                formwidth = $("#form-width").val();
                $("#acf-contact-form").css('width', formwidth+'px');
              });

              $("#insert-acf-form").click(function(e){

                 var showname2, showsubject2;

                 if (showname == true) showname2 = 'yes'; else showname2 = 'no';
                 if (showsubject == true) showsubject2 = 'yes'; else showsubject2 = 'no';
                 if (showbox == true) box2 = 'yes'; else box2 = 'no';

                 var name_label = $("#name").val();
                 var email_label = $("#email").val();
                 var subject_label = $("#subject").val();
                 var message_label = $("#message-form").val();
                 var button_label = $("#acf-send-button").text();

                 if (formwidth < 140 ) formwidth = 140;
                 if (formwidth > 1000 ) formwidth = 1000;


                  ed.execCommand('mceInsertContent', false, '<p>[acf_contact_form width="'+formwidth+'px" box="'+box2+'" name="'+showname2+'" subject="'+showsubject2+'" name_label="'+name_label+'" email_label="'+email_label+'" subject_label="'+subject_label+'" message_label="'+message_label+'" button_text="'+button_label+'"]</p>');

                 Avgrund.hide("#default-popup");
                 e.preventDefault();
              });



        }
     });
  },
  createControl : function(n, cm) {
     return null;
  },
  getInfo : function() {
     return {
        longname : "Ajax Contact Form Shortcode",
        author : 'Jacek Jagiello',
        version : "1.0"
     };
  }
});
tinymce.PluginManager.add('acfshortcode', tinymce.plugins.acfshortcode);
})();

});

这是上面在编辑器中插入短代码的函数形式代码:

(...) onclick : function() {


       var showname = true;
       var showsubject = true;
       var showbox = true;
       var formwidth = $("#form-width").val();

       Avgrund.show("#acf-popup");

          $("#disable_name").click(function(e){

             if (showname) {
                $("#name").parent().slideUp('200');
                showname = false;
             }else{
                 $("#name").parent().slideDown('200');
                showname = true;
             }

          });




          $("#close-modal").click(function(e){

             Avgrund.hide("#default-popup");

          });


          $("#disable_subject").click(function(e){

             if (showsubject) {
                $("#subject").parent().slideUp('200');
                showsubject = false;
             }else{
                $("#subject").parent().slideDown('200');
                showsubject = true;
             }
          });

          $("#disable_box").click(function(e){

             if (showbox) {
                $("#acf-contact-form").removeClass('acf-box');
                showbox = false;
             }else{
                $("#acf-contact-form").addClass('acf-box');
                showbox = true;
             }

          });

          $("#form-width").keyup(function() {
            formwidth = $("#form-width").val();
            $("#acf-contact-form").css('width', formwidth+'px');
          });

          $("#insert-acf-form").click(function(e){

             var showname2, showsubject2;

             if (showname == true) showname2 = 'yes'; else showname2 = 'no';
             if (showsubject == true) showsubject2 = 'yes'; else showsubject2 = 'no';
             if (showbox == true) box2 = 'yes'; else box2 = 'no';

             var name_label = $("#name").val();
             var email_label = $("#email").val();
             var subject_label = $("#subject").val();
             var message_label = $("#message-form").val();
             var button_label = $("#acf-send-button").text();

             if (formwidth < 140 ) formwidth = 140;
             if (formwidth > 1000 ) formwidth = 1000;


              ed.execCommand('mceInsertContent', false, '<p>[acf_contact_form width="'+formwidth+'px" box="'+box2+'" name="'+showname2+'" subject="'+showsubject2+'" name_label="'+name_label+'" email_label="'+email_label+'" subject_label="'+subject_label+'" message_label="'+message_label+'" button_text="'+button_label+'"]</p>');

             Avgrund.hide("#default-popup");
             e.preventDefault();
          });



    }

Answer 1

您要在按钮的 onclick 处理程序中添加弹出窗口的事件处理程序。这意味着每次您单击按钮时都会添加它们。

换句话说，第二次通过单击按钮打开弹出窗口时，#insert-acf-form 上有两个单击处理程序。第三次您将拥有三个，依此类推。您分配的所有其他事件处理程序也是如此 - 但只有单击处理程序会立即显现，因为 mceInsertContent 将被调用两次。

一个解决方案:由于在您第一次单击按钮之前似乎已经创建了弹出窗口，因此您可以在 onclick 事件处理程序之外添加它的所有事件处理程序 - 即在初始化代码中(注意，代码是只是为了演示这个想法，它未经过测试，可能包含语法错误等):

jQuery(document).ready(function($) {
   $("#wpwrap").append("<div class=\"avgrund-cover\"></div>");

   $("#close-modal").click(function() {
      Avgrund.hide("#acf-popup");
   });

   (function() {
      var showname = true;
      var showsubject = true;
      var showbox = true;
      var formwidth = $("#form-width").val();

      // ********** MOVE REGISTRATION OF POPUP EVENT HANDLERS HERE **********

      tinymce.create('tinymce.plugins.acfshortcode', {
         init : function(ed, url) {
            ed.addButton('acfshortcode', {
               title : 'Ajax Contact Form',
               image : url+'/../acf-button.png',
               onclick : function() {
                  Avgrund.show("#acf-popup");
                  // ************* NOTE, NO EVENT HANDLERS HERE ***********
               }
            });
         },
         createControl : function(n, cm) {
            return null;
         },
         // etc.
      });
   })();
}

或者，您可以在 onclick 中添加检查，以查看之前是否调用过 onclick，并且在这种情况下不再添加事件处理程序。