"＃button_1"は.click（）または.hover（）の影響を受けません

Question

おそらくルーキーミスですが、#button_1 IDはclick()またはhover() jQueryエフェクトの影響を受けません。

誰かがmy JSFiddleをすばやく見ることができれば、非常に感謝しています。

おそらくかなりわかりますが、私は#button_1を他のすべてのボタンとして機能させたいと考えています。 :)

もう一度、私はそれが私が見落としたことはかなり愚かな間違いだと思う。

$('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：

Answer 1

これを試してみて、ラインによってその作業

てみライン、そのコードのどこかでエラーを投げ、バインドイベントを破り、そんなにコードを繰り返さないでください。 ホバーなどで何らかのエラーがあり、すべてを削除してバインドイベントが発生すると、それらは機能します。

あなたはこの行を知っています.1行目がdocumentreadyで壊れると、下のすべてのバインディングがバインドされないことがあります。

$(document).ready(function() { 

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

    }); 

}); 

Answer 2

は私がに近いものに、少しそのコードを凝縮することをお勧めかもしれません。 OPからの質問に対して

---

編集：

だけ追加するには、[the Fiddle updated by the OP to include the above code]実際には、代わりに "button_active" のクラスとして、なぜそれがあろう任意のアイデアを "button_hover" を設定しますあれ？

イエップ;それはCSSセレクタの特異性に応じて、レスポンスイベントで必要に応じてクラスを追加および削除します（button_hoverが設定されているかどうかを繰り返し確認するのではなく）。要素がclass="button_normal button_hover"で終わり、CSSの順序（私が考える）は、後で宣言されたクラスに重点を置きます。button_hoverが維持されます。遅いですが、ちょっと疲れていますが、それは一言で言えば、何が起こっているのかです。

$('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

次のデモでは、あなたが必要なすべて（と思う）、および、改訂されたCSSセレクタと相まって、あなたが望むよう行う必要がありますが組み込まれています。

---

参考文献：

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