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

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

** 更新 **

您的 script 标签应类似于

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

此处< /a> 是对 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>