CODEWITHSUNDEEP
htmljquerycssjquery-events
GG.
GG.

Reputation: 21844

jQuery click issue with a span styled to look like a button

Context

I've this buttons:

enter image description here

I detect when the user is clicking with jQuery .click().

But it works only if the user clicks on the text ("imdb" / "rottenTomatoes").

If the user clicks on the blue of button, jQuery detects nothing.

enter image description here

You can try on http://promobluray.fr.

Questions

Code

:

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

:

.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;
}

:

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

​

Upvotes: 2

Views: 1011

Answers (3)

charlietfl
charlietfl

Reputation: 171669

Use parent to attach handler

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

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You could try to increase the padding of the button so that the <span> matches the dimension of the image, but i think that the best solution is to change your markup and actually use <button>

Upvotes: 2

Deadlykipper
Deadlykipper

Reputation: 878

It's seems to work in the latest versions of FF and IE, but not Chrome, Opera and Safari(win). I would suggest adding display:block; to .rating-btn styles to see what that does.

Alternatively, actually use buttons and style those how you want.

Upvotes: 0

Related Questions