Jquery click function + css

Question

i have no idea what i'm doing wrong. It's simple code, but doesn't work.

<div id="demo1" class="rating">
<input class="stars" type="radio" id="1" name="rating" value="1" />
<label class = "full" for="star5" title="Awesome - 5 stars"></label>
</div>

<div id="demo2" class="rating2">
<input class="stars" type="radio" id="2" name="rating" value="1" />
<label class = "full" for="star5" title="Awesome - 5 stars"></label>
</div>

  $(document).ready(function () {

                    $("#demo2 input.stars").click(function () {
                             alert('2');       
                        });

                        $("#demo1 input.stars").click(function () {
                              alert('1');        
                        });  
                    });

This code works fine (when i click first radio, it's alert "1", when click second it's alert "2").

But... with this CSS:

       <style>
        /****** Rating Starts *****/
        @import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

        fieldset, label, span { margin: 0; padding: 0; }
        body{ margin: 20px; }
        h1 { font-size: 1.5em; margin: 10px; }

        .rating { 
            border: none;
            float: left;
        }

        .rating > input { display: none; } 

        .rating > label:before { 
            margin: 5px;
            font-size: 1.25em;
            font-family: FontAwesome;
            display: inline-block;
            content: "\f005";
        }

                    .rating2 { 
            border: none;
            float: left;
        }


        .rating > label { 
            color: #ddd; 
            float: right; 
             cursor:pointer;
        }

        .rating2 > label { 
            color: #ddd; 
            float: right; 
             cursor:pointer;
        }





                    .rating2 > input { display: none; } 

        .rating2 > label:before { 
            margin: 5px;
            font-size: 1.25em;
            font-family: FontAwesome;
            display: inline-block;
            content: "\f164";       
        }


    </style>

...with this css, i always get alert 1.

Help, please. No idea why when i click second radio i have alert 1 instead 2.

Regards Luke

.rating > input { display: none; } and .rating2 > input { display: none; } will do it. Your rating inputs (which the click event is tied to) is not visible any more. Therefore, there's nothing on the page which will respond to your event. — ADyson
– ADyson, Commented Feb 27, 2017 at 14:18
Ok, inputs are invisible, but alert is shown, when i click each radio. Problem is, that with this css i get alert (1) no matter i click first or second radio. — AoW
– AoW, Commented Feb 27, 2017 at 14:22
The radios are the inputs. Your statement makes no sense. And when I tried it, with the CSS, it didn't alert anything. Have suggested a solution below - your HTML could do with a tweak. — ADyson
– ADyson, Commented Feb 27, 2017 at 14:24

Jakob · Accepted Answer · 2017-02-27 14:32:36Z

2

Font awesome icons are tied to label:before so you should do something like:

$(document).ready(function() {

  $("#demo2 label").click(function() {
    alert('2');
  });

  $("#demo1 label").click(function() {
    alert('1');
  });
});

Full example here https://jsfiddle.net/496bgx53/

Update with input value https://jsfiddle.net/496bgx53/1/

edited Feb 27, 2017 at 14:32

answered Feb 27, 2017 at 14:21

Jakob

3,5564 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brent Boden Over a year ago

@Aow, I would suggest that you simplify the css a bit

AoW Over a year ago

Ok, it works fine, but in jquery function i would like to get value of input. I have ... rate:$(this).val() ... So, when i change jquery to LABEL i can't get input value.

Jakob Over a year ago

you could just find closest input value.. see updated answer

ADyson · Accepted Answer · 2017-02-27 14:25:39Z

1

.rating > input { display: none; }

and

.rating2 > input { display: none; }

are hiding the inputs which are the targets of your click event.

Your labels are not linked to the corresponding inputs. The for attribute of the label should hold the ID of the input that it corresponds to.

Therefore, change to:

<label class = "full" for="1" title="Awesome - 5 stars"></label>

and

<label class = "full" for="2" title="Awesome - 5 stars"></label>

Once you do that, the labels will also respond to the click event of the (hidden) input and display the correct value.

This fiddle demonstrates it without the CSS, showing just an empty radio button, which when clicked display the right values:

https://jsfiddle.net/qtu3x7sn/

This fiddle is the fixed version, with the labels correctly pointing to the relevant inputs, and the CSS included:

https://jsfiddle.net/qtu3x7sn/1/

answered Feb 27, 2017 at 14:25

ADyson

62.9k16 gold badges86 silver badges99 bronze badges

1 Comment

AoW Over a year ago

Great! Thank You very much. So - my bad was, that i didn't understood FOR atribute in label.

Collectives™ on Stack Overflow

Jquery click function + css

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related