Onclick 事件运行两次

Question

我似乎无法弄清楚为什么我的onclick() 事件会在用户单击星号时触发两次。

如果用户点击第一组中的第一颗星，它应该输出1和0.5到控制台，但它输出1和undefined和1和0.5。

第一个值应该表示隐藏输入字段的值，第二个应该表示无线电/星的值。

$(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

您的代码的问题是单击fieldset 中的label 会在input 上发出click 事件。所以你真的有 两次 点击 - 第一次在标签上，第二次 - 在相关的 input radio 上。

因此，您需要做的是跟踪radio 的change 事件，而不是跟踪对fieldset 的点击。

更新：正如 Temani Afif 在 cmets 中提到的那样，由于您的输入具有 非唯一 id，因此在第二个 fieldset 中单击 radio 仍然有价值input[type='hidden'] 在 first fieldset。所以，你需要too替换你的标签ID。

更多：labels 的一个更好的做法是将 input 包装在其中，因此您可以使用以下标记：

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

在这种情况下，您不需要 id 和 for，因为 label 与其中的元素一起使用。

$(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>