jQuery click проблема с диапазоном в стиле, похожем на кнопку

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() { ... });

1056 *

Answer 1

Вы можете попытаться увеличить отступ кнопки, чтобы <span> соответствовал размеру изображения, но я думаю, что лучшее решение - изменить разметку и фактически использовать <button>

Answer 2

Использовать родительский для прикрепления обработчика

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

Answer 3

Кажется, он работает в последних версиях FF и IE, но не в Chrome, Opera и Safari (победа).Я бы предложил добавить display:block; к .rating-btn стилям, чтобы увидеть, что это делает.

В качестве альтернативы, используйте кнопки и стилируйте их так, как вы хотите.