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");
            });
});

原因在于，即使DOM树尚未完全加载，某些浏览器也允许JS执行，并导致元素不存在或尚不可用。 jQuery函数$(function() { ... });将确保只有在所有内容都已加载并准备就绪时才会运行内部代码。

** 更新 **

您的script代码应该是

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

并且here是对jsfiddle的测试，表明它适用于您提供的代码。如果它对您不起作用，那么您的问题就在其他地方。我建议你使用Google Chrome和它的开发工具来调试你的Javascript。

Answer 2

这个脚本在我的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>

Answer 3

将代码包裹在$(function(){});中这意味着只有在DOM准备就绪时才会执行代码：

<script>    

    $(function(){

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

    });

</script>

Jquery的同步问题 - 没有警报就无法工作

3 个答案: