Onclick事件运行两次

Question

I can't seem to work out why my onclick() event fires twice when the user clicks on a star.

If the user clicks on the first star in the first set, it should output 1 and 0.5 to the console, but instead it outputs 1 and undefined and 1 and 0.5 .

The first value is supposed to represent the value of the hidden input field, and the second is supposed to represent the value of the radio/star.

 $(document).on('click', 'fieldset', function () { console.log($(this).find("input[type='hidden']").val()); console.log($(this).find("input[type='radio']:checked").val()); }); 

 fieldset, label { margin: 0; padding: 0; margin-bottom: 20px; } .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"; } .rating>.half:before { content: "\\f089"; position: absolute; } .rating>label { color: #ddd; float: right; } .rating>input:checked~label, /* show gold star when clicked */ .rating:not(:checked)>label:hover, /* hover current star */ .rating:not(:checked)>label:hover~label { color: #FFD700; } /* hover previous stars in list */ .rating>input:checked+label:hover, /* hover current star when changing rating */ .rating>input:checked~label:hover, .rating>label:hover~input:checked~label, /* lighten current selection */ .rating>input:checked~label:hover~label { color: #FFED85; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <fieldset class="rating"> <input type="hidden" value="1"> <input type="radio" id="5star" name="rating" value="5" /> <label class="full" for="5star" title="Excellent"></label> <input type="radio" id="4halfstar" name="rating" value="4.5" /> <label class="half" for="4halfstar" title="Good"></label> <input type="radio" id="4star" name="rating" value="4" /> <label class="full" for="4star" title="Pretty good"></label> <input type="radio" id="3halfstar" name="rating" value="3.5" /> <label class="half" for="3halfstar" title="Nice"></label> <input type="radio" id="3star" name="rating" value="3" /> <label class="full" for="3star" title="Ok"></label> <input type="radio" id="2halfstar" name="rating" value="2.5" /> <label class="half" for="2halfstar" title="Kinda bad"></label> <input type="radio" id="2star" name="rating" value="2" /> <label class="full" for="2star" title="Bad"></label> <input type="radio" id="1halfstar" name="rating" value="1.5" /> <label class="half" for="1halfstar" title="Meh"></label> <input type="radio" id="1star" name="rating" value="1" /> <label class="full" for="1star" title="Umm"></label> <input type="radio" id="halfstar" name="rating" value="0.5" /> <label class="half" for="halfstar" title="Worst"></label> </fieldset> <br><br> <fieldset class="rating"> <input type="hidden" value="2"> <input type="radio" id="5star" name="rating" value="5" /> <label class="full" for="5star" title="Excellent"></label> <input type="radio" id="4halfstar" name="rating" value="4.5" /> <label class="half" for="4halfstar" title="Good"></label> <input type="radio" id="4star" name="rating" value="4" /> <label class="full" for="4star" title="Pretty good"></label> <input type="radio" id="3halfstar" name="rating" value="3.5" /> <label class="half" for="3halfstar" title="Nice"></label> <input type="radio" id="3star" name="rating" value="3" /> <label class="full" for="3star" title="Ok"></label> <input type="radio" id="2halfstar" name="rating" value="2.5" /> <label class="half" for="2halfstar" title="Kinda bad"></label> <input type="radio" id="2star" name="rating" value="2" /> <label class="full" for="2star" title="Bad"></label> <input type="radio" id="1halfstar" name="rating" value="1.5" /> <label class="half" for="1halfstar" title="Meh"></label> <input type="radio" id="1star" name="rating" value="1" /> <label class="full" for="1star" title="Umm"></label> <input type="radio" id="halfstar" name="rating" value="0.5" /> <label class="half" for="halfstar" title="Worst"></label> </fieldset> 

Answer 1

Problem with you code is that clicking on label in a fieldset emits click event on the input . So you really have two clicks - first on label, second - on related input radio .

So, what you need to do is to track change event for radio instead tracking clicks on fieldset .

Update: And as Temani Afif mentioned in comments, as you have non-unique ids for inputs, clicking on radio in second fieldset still gets value of input[type='hidden'] in first fieldset . So, you need to replace you labels ids too .

More : a better practice for label s is wraping input in it, so you have markup something like:

<label class="half" title="Good">
    <input type="radio" name="rating" value="4.5" />
</label>

In this case you don't need id and for as label works with element which is inside it.

 $(document).on('change', 'input[type="radio"]', function (e) { console.log( $(this).val(), $(this).parent().find("input[type='hidden']").val() ); }); 

 fieldset, label { margin: 0; padding: 0; margin-bottom: 20px; } .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"; } .rating>.half:before { content: "\\f089"; position: absolute; } .rating>label { color: #ddd; float: right; } .rating>input:checked~label, /* show gold star when clicked */ .rating:not(:checked)>label:hover, /* hover current star */ .rating:not(:checked)>label:hover~label { color: #FFD700; } /* hover previous stars in list */ .rating>input:checked+label:hover, /* hover current star when changing rating */ .rating>input:checked~label:hover, .rating>label:hover~input:checked~label, /* lighten current selection */ .rating>input:checked~label:hover~label { color: #FFED85; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <fieldset class="rating"> <input type="hidden" value="1"> <input type="radio" id="5star" name="rating" value="5" /> <label class="full" for="5star" title="Excellent"></label> <input type="radio" id="4halfstar" name="rating" value="4.5" /> <label class="half" for="4halfstar" title="Good"></label> <input type="radio" id="4star" name="rating" value="4" /> <label class="full" for="4star" title="Pretty good"></label> <input type="radio" id="3halfstar" name="rating" value="3.5" /> <label class="half" for="3halfstar" title="Nice"></label> <input type="radio" id="3star" name="rating" value="3" /> <label class="full" for="3star" title="Ok"></label> <input type="radio" id="2halfstar" name="rating" value="2.5" /> <label class="half" for="2halfstar" title="Kinda bad"></label> <input type="radio" id="2star" name="rating" value="2" /> <label class="full" for="2star" title="Bad"></label> <input type="radio" id="1halfstar" name="rating" value="1.5" /> <label class="half" for="1halfstar" title="Meh"></label> <input type="radio" id="1star" name="rating" value="1" /> <label class="full" for="1star" title="Umm"></label> <input type="radio" id="halfstar" name="rating" value="0.5" /> <label class="half" for="halfstar" title="Worst"></label> </fieldset> <br><br> <fieldset class="rating"> <input type="hidden" value="2"> <input type="radio" id="second-5star" name="rating" value="5" /> <label class="full" for="second-5star" title="Excellent"></label> <input type="radio" id="second-4halfstar" name="rating" value="4.5" /> <label class="half" for="second-4halfstar" title="Good"></label> <input type="radio" id="second-4star" name="rating" value="4" /> <label class="full" for="second-4star" title="Pretty good"></label> <input type="radio" id="second-3halfstar" name="rating" value="3.5" /> <label class="half" for="second-3halfstar" title="Nice"></label> <input type="radio" id="second-3star" name="rating" value="3" /> <label class="full" for="second-3star" title="Ok"></label> <input type="radio" id="second-2halfstar" name="rating" value="2.5" /> <label class="half" for="second-2halfstar" title="Kinda bad"></label> <input type="radio" id="second-2star" name="rating" value="2" /> <label class="full" for="second-2star" title="Bad"></label> <input type="radio" id="second-1halfstar" name="rating" value="1.5" /> <label class="half" for="second-1halfstar" title="Meh"></label> <input type="radio" id="second-1star" name="rating" value="1" /> <label class="full" for="second-1star" title="Umm"></label> <input type="radio" id="second-halfstar" name="rating" value="0.5" /> <label class="half" for="second-halfstar" title="Worst"></label> </fieldset>