Javascript-код, кажется, выполняется много раз, почему?

Question

Я пытаюсь вставить Wordpress shortocde в редактор tinyMCE через кнопку, у меня есть небольшая проблема. Сценарий вставляет короткий код несколько раз. Это трудно сформировать мне объяснить это хорошо, так что я записал короткое видео:

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

Heres полный 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 была вызвана прежде, и не добавлять обработчики событий снова в этом случае.