Jquery와 동기화 문제 - 경고없이 작동하지 않습니다.

Question

클릭 할 때 Jquery를 사용하여 클래스를 변경 한 두 개의 버튼이 있습니다. 경고를 먼저 호출하면 문제가 발생합니다.

나는 이것이 아직로드되지 않았기 때문에, 하지만 나는 누가 그리고 왜 이해할 수 없다는 것을 알고 있습니다.

 <input type="button" id="About" class="menu_button" value="About"/> 
    <input type="button" id="Contact" class="menu_button" value="Contact" /> 

    <script>  

     $(".menu_button").click(function() 
      { 
       //alert("onMenuClick"); 
       $(".menu_button").removeClass("menu_button_selected"); 
       $(this).addClass("menu_button_selected"); 
      }); 


     </script> 

감사 :

이 내 코드입니다!

Answer 1

파이어 폭스에서 나를 위해이 스크립트는 잘 작동 :

<script type="text/javascript"> 

$(document).ready(function() { 


$(".menu_button").bind('click',function() 
     { 
      //alert("onMenuClick"); 
      $(".menu_button").removeClass("menu_button_selected"); 
      $(this).addClass("menu_button_selected"); 
     }); 
} 
</script> 

Answer 2

이에 좋은 일이 항상 있다는 것을 onload 이벤트

$(function() { 
$(".menu_button").click(function() 
      { 
       //alert("onMenuClick"); 
       $(".menu_button").removeClass("menu_button_selected"); 
       $(this).addClass("menu_button_selected"); 
      }); 
}); 

이유는 내부에 코드를 삽입해야한다 항상 일부 브라우저는 DOM 트리가 아직 완전히로드되지 않았고 요소가 없거나 아직 사용할 수없는 경우에도 JS를 실행할 수 있습니다. jQuery 함수 $(function() { ... });은 모든 것이로드되고 준비되었을 때만 코드가 실행되도록합니다.

** UPDATE **

<script type="text/javascript"> 
    // js here 
</script> 

그리고 here은 당신이 준 코드를 작동하는지 보여주는 jsfiddle에 시험처럼 당신의 script 태그가 보일 것입니다. 그것이 당신을 위해 작동하지 않는다면, 당신의 문제는 어딘가에 있습니다. Google Chrome을 사용하고 Javascript를 디버그하기위한 개발 도구를 사용하는 것이 좋습니다.

Answer 3

는 랩 $(function(){});의 코드는이 코드에만 DOM이 준비가 될 때 실행된다는 것을 의미합니다 :

<script>  

    $(function(){ 

     $(".menu_button").click(function() 
     { 
      //alert("onMenuClick"); 
      $(".menu_button").removeClass("menu_button_selected"); 
      $(this).addClass("menu_button_selected"); 
     }); 

    }); 

</script>