자바 스크립트 두 번 실행

Question

나는 학교용으로 작은 응용 프로그램을 개발해야하고 처음에는 포토샵에서 조금 설계하여 html로 "변환"했습니다. 그게 다 괜찮 았어. 나는 자바 스크립트로 사용자 정의 드롭 다운을 만들었고 원활하게 작동했습니다. 방금 CodeIgniter를 디자인에 구현하려고 시도했지만 javascript가 두 번 실행되기 시작했습니다.

일반 HTML 버전의 코드와 codeigniter 결과를 비교해 보았지만 어떤 차이점도없는 것 같습니다.

나를 도와 줄 수 있습니까? Krof Drakula에 의해 질문으로 http://intellia.itforit.net/index.htm

여기에 코드의 가장 중요한 조각되어 있습니다 :

이

실제 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); 

그리고 여기이야 다음은 CodeIgniter의 결과입니다 그것은이 시작됩니다 : (canvasDrawing.js) 사전에

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

고맙습니다,,Duckness

Answer 1

canvasDrawing.js가 "중요하지 않은 캔버스 항목"에 있으면 자바 스크립트 오류가 발생합니다. 설명하는 캔버스가 실제로 존재하면 styleForm은 한 번만 실행됩니다. 그래서 이것을 HTML에 추가하십시오 :

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

그리고 마법이 일어날 것입니다. 또는 당신의 canvasDrawing 파일에서 styleForm 후이 권리 같은 조항을 추가

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

실제로 모든 것을 명확하지 않다 그 함수가 두 번 실행됩니다,하지만 확실히 문제의에서 오류를 가진 이유. 그것을보십시오 : your code + a canvas element = working.