Проблема синхронизации с 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

это всегда хорошо для Вы всегда должны размещать свой код внутри onload события

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

Причина в том, что некоторые браузеры разрешают выполнение JS, даже если дерево DOM еще не загружено полностью, что приводит к тому, что элементы отсутствуют или недоступны. Функция jQuery $(function() { ... }); гарантирует, что код внутри будет выполняться только тогда, когда все загружено и готово.

** ОБНОВЛЕНИЕ **

Ваши script теги должны выглядеть как

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

И здесь - это тест на jsfiddle, показывающий, что он работает для кода, который вы дали. Если это не работает для вас, то ваша проблема в другом месте. Я предлагаю вам использовать Google Chrome и его инструмент для разработки для отладки вашего Javascript.

Answer 2

Оберните ваш код в $(function(){}); Это означает, что ваш код будет выполняться только тогда, когда DOM готов к этому:

<script>    

    $(function(){

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

    });

</script>

Answer 3

Этот скрипт отлично работает у меня под Firefox:

<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>