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

Javascript code seems to execute many times, why?

本文关键字：为什么 代码 执行 Javascript      更新时间：2023-09-26

我试图通过按钮在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();
          });

    }

您正在为按钮的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以前是否被调用过，在这种情况下不需要再次添加事件处理程序。

相关文章：