jQueryの私は、このボタンをしたボタン

Question

コンテキストのよう

を見てスタイルスパンで問題をクリックしてください：

ユーザーはjQueryの.click()でクリックされたとき、私は検出。

しかし、それはユーザーがテキスト（ "IMDB "/" rottenTomatoes"）をクリックした場合にのみ機能します。

ユーザーがボタンの青色をクリックすると、jQueryは何も検出しません。

あなたはhttp://promobluray.frに試すことができます。

質問

• 問題は何ですか？
• これをボタンのように動作させるにはどうすればよいですか？

コード

html：

<span class="rating"> 
    <span class="rating-btn imdb active">imdb</span> 
    <span class="rating-btn rt">rottenTomatoes</span> 
</span>​ 

css：

.rating { 
    padding: 14px; 
} 

.rating-btn { 
    display: inline-block; 
    margin-top: 24px; 
    padding: 4px; 
    position: relative; 
    font-family: 'Open Sans',sans-serif; 
    font-size: 12px; 
    text-decoration: none; 
    color: white; 
    cursor: pointer; 
    background-image: -o-linear-gradient(bottom,#2CA0CA 0,#08C 100%); 
    background-image: -moz-linear-gradient(bottom,#2CA0CA 0,#08C 100%); 
    background-image: -webkit-linear-gradient(bottom,#2CA0CA 0,#08C 100%); 
    background-image: -ms-linear-gradient(bottom,#2CA0CA 0,#08C 100%); 
    background-image: linear-gradient(bottom,#2CA0CA 0,#08C 100%); 
    -webkit-box-shadow: inset 0 1px 0 #7fd2f1,0px 6px 0 #156785; 
    -moz-box-shadow: inset 0 1px 0 #7fd2f1,0px 6px 0 #156785; 
    box-shadow: inset 0 1px 0 #7fd2f1,0px 6px 0 #156785; 
    border-radius: 5px; 
} 

.rating-btn::before { 
    background-color: #072239; 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    padding-left: 2px; 
    padding-right: 2px; 
    padding-bottom: 4px; 
    left: -2px; 
    top: 5px; 
    z-index: -1; 
    border-radius: 6px; 
    -webkit-box-shadow: 0 1px 0 #fff; 
    -moz-box-shadow: 0 1px 0 #fff; 
    box-shadow: 0 1px 0 #fff; 
} 

.active { 
    background: #2CA0CA; 
    -webkit-box-shadow: inset 0 1px 0 #7fd2f1,inset 0 -1px 0 #156785; 
    -moz-box-shadow: inset 0 1px 0 #7fd2f1,inset 0 -1px 0 #156785; 
    box-shadow: inset 0 1px 0 #7fd2f1,inset 0 -1px 0 #156785; 
    top: 7px; 
    cursor: default; 
} 

.imdb { 
    margin-right: 5px; 
} 

jquery：

$('.rating-btn').click(function() { ... }); 

Answer 1

あなたは<span>は、画像の大きさが一致するように、ボタンのパディングを高めるために試みることができるが、私は最善の解決策は、あなたのマークアップを変更して、実際にハンドラをアタッチする<button>

Answer 2

最新のFFとIEのバージョンではなく、クローム、オペラとSafari（勝利）で動作するように思われます。私はdisplay:block;に.rating-btnのスタイルを追加して、それが何をするかを見てみることをお勧めします。

また、実際にボタンを使用してスタイルを設定することもできます。

Answer 3

使用し、親を使用することであると思います

$('.rating:has(.rating-btn)').click(function() { ... });