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。