Javascript正在运行两次

Question

我必须为学校开发一个小型应用程序，我首先在photoshop中设计了一下，并将它“转换”为html。这一切都很好。我用javascript创建了一个自定义下拉菜单，并且工作顺利。我刚刚尝试在设计中实现CodeIgniter，但JavaScript开始运行两次。

我试过比较纯html版本的代码和codeigniter结果，但我似乎无法找到任何区别。

你们能帮助我吗？ 这里的笨结果： http://intellia.itforit.net/index.htm

由于要求通过Krof Drakula这里是代码的最重要的部分：

实际的jQuery插件：（styleForm.js）

;(function($){ 
    $.fn.styleForm = function() { 
     var form = this; 

     /* Select */ 
     $('select', this).each(function(){ 
      var div = '<div class="styledSelect"><ul>'; 
      var first = false; 

      $('option', this).each(function(){ 
       var cssclass = ""; 
       if(!first) { 
        first = true; 
        cssclass = 'class="first"' 
       } 
       div += '<li ' + cssclass + ' id="' + $(this).attr("value") + '">' + $(this).text() + '</li>'; 
      }); 

      div += '</ul></div>'; 
      $(this).hide(); 
      $(this).after(div); 
     }); 

     $('.styledSelect ul').toggle(function(){ 
      $('li:not(.first)', this).show("fast"); 
     }, function(){ 
      $('li:not(.first)', this).hide("fast"); 
     }); 

     $('.styledSelect ul li:not(.first):not(.selected)').click(function(){ 
      var id = $(this).attr('id'); 
      var content = $(this).text(); 
      $('.styledSelect ul li.first').attr('id', id).text(content); 
      $('.styledSelect ul li').css({'font-weight': 'normal'}); 
      $(this).css({'font-weight': 'bold'}); 

      /* SELECT in Select form item */ 
      var selected = $('select option[value="' + id + '"]:not(.first)', form).get(0); 
      selected.setAttribute("selected", "selected"); 
      //$(form).submit(); 
     }); 

    }; 
})(jQuery); 

这里的地方它会启动：（canvasDrawing.js）

$(document).ready(function(){ 
    $('form').styleForm(); 
    //Unimportant canvas stuff 
}); 

Thanx in advance， Duckness

Answer 1

问题是，您的canvasDrawing.js，在“不重要的画布的东西”，导致一个JavaScript错误。如果它描述的画布实际上存在，则styleForm只会运行一次。因此，将此添加到您的HTML：

 <canvas id="floorplan"></canvas> 

而魔法会发生。或者，在你的canvasDrawing文件，styleForm后加从句这样的权利：

var canvas = document.getElementById('floorplan'); 
if (!canvas) 
    return; 

我实际上不是所有的清楚，为什么有错误在功能使其运行两次，但它绝对是问题。看到它：your code + a canvas element = working。