「＃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()。