Question

可能是一个菜鸟错误，但我的#button_1 ID不受click()或hover() jQuery效果的影响。

如果有人可以快速查看my JSFiddle，我们将不胜感激。

这可能很明显，但我希望#button_1充当其他按钮。：）

同样，我怀疑这是一个非常愚蠢的错误，我忽略了这一点。

Answer 1

不要重复这么多代码，试试这个及其工作

逐行尝试，在代码中的某处抛出错误并破坏绑定事件。你在悬停时有一些错误，删除所有内容并绑定事件，它们都可以正常工作。

你知道这是正确的，当第1行在documentready中断时，下面的所有绑定都可能没有绑定。

$(document).ready( function () {

   $('#button_1,#button_2').click(function() {
  alert('Handler for .click() called.');

   });

});

Answer 2

我可能会建议稍微缩小代码，使其更接近：

$('a div[class^="button"]').click(
    function(e){
        e.stopPropagation(); // prevent the click bubbling to the parent 'a' element
        $('.button_active')
            .removeClass('button_active')
            .addClass('button_normal');
        $(this).addClass('button_active').removeClass('button_normal');
    });

JS Fiddle demo

已编辑以回应OP提出的问题：

只是添加，[the Fiddle updated by the OP to include the above code]实际上将“button_hover”设置为类而不是“button_active”，任何想法为什么会这样？

是的;这是为了响应CSS选择器的特殊性，我在响应事件中根据需要添加和删除类（而不是反复检查是否设置了button_hover）。由于元素以class="button_normal button_hover"结束，并且css的顺序（我认为）更加强调后面声明的类，因此保持button_hover。现在已经很晚了，我有点累了，但是那简直就是发生了什么。

以下演示包含了您需要的所有内容（我认为），并且与修订后的CSS选择器相结合，应该按照您的需要进行：

$('a div[class^="button"]').hover(
    function(){
        $(this).addClass('button_hover').click(
            function(e){
                e.preventDefault();
                $('.button_active')
                    .addClass('button_normal')
                    .removeClass('button_active');
                $(this).addClass('button_active').removeClass('button_hover');
            });
    },
    function(){
        $(this).removeClass('button_hover');
    });

CSS：

.button_active,
.button_normal.button_active { background: #000; }
.button_normal.button_hover { background: #ff0; }
.button_normal { background: #d89; }

JS Fiddle demo

参考文献：

“＃button_1”不受.click（）或.hover（）的影响

2 个答案: