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

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。

---

参考文献：

• attribute-begins-with (^=) selector。
• e.stopPropagation()。
• removeClass()。
• addClass()。