求助：点击星星时onclick()事件触发两次，输出结果异常

看起来你遇到的核心问题是事件重复触发，导致控制台输出了多余的undefined和重复值。结合你的代码片段和输出情况，我整理了几个最可能的原因和对应的解决办法：

可能的原因1：事件冒泡导致重复触发 #

如果你的星星是用<label>标签模拟（绑定到隐藏的单选框），点击<label>时会触发两个冒泡事件：

1. <label>自身的点击事件冒泡到<fieldset>
2. <label>触发了关联单选框的点击事件，这个事件同样会冒泡到<fieldset>

这就导致你的事件处理函数被调用了两次。

可能的原因2：事件重复绑定 #

如果你的代码中多次执行了$(document).on('click', 'fieldset', function () {...})，就会给同一个事件绑定多个处理函数，每次点击都会触发所有绑定的函数。

对应的解决办法 #

办法1：缩小事件委托的目标范围 #

不要把事件绑定在整个<fieldset>上，而是直接绑定到星星对应的元素（比如<label>或单选框），这样只会在点击星星时触发一次：

$(document).on('click', 'fieldset label, fieldset input[type="radio"]', function () {
  // 先找到当前所在的fieldset
  const $fieldset = $(this).closest('fieldset');
  // 获取隐藏输入框的值
  console.log($fieldset.find("input[type='hidden']").val());
  // 获取单选框/星星的值
  console.log($(this).is('input') ? $(this).val() : $(`#${$(this).attr('for')}`).val());
});

办法2：阻止不必要的事件冒泡 #

如果必须绑定在<fieldset>上，可以在事件处理函数中判断触发源，或者阻止重复冒泡：

$(document).on('click', 'fieldset', function (event) {
  // 只处理直接点击星星元素的情况，忽略冒泡过来的重复事件
  const target = event.target;
  if (!$(target).is('label, input[type="radio"]')) {
    return;
  }
  
  console.log($(this).find("input[type='hidden']").val());
  // 其他逻辑代码
});

办法3：确保事件只绑定一次 #

如果是重复绑定导致的问题，可以先解绑再绑定，避免重复：

// 先移除之前的绑定，再添加新的
$(document).off('click', 'fieldset').on('click', 'fieldset', function () {
  console.log($(this).find("input[type='hidden']").val());
  // 其他逻辑代码
});

另外，你可以在事件处理函数中添加日志，排查具体触发源：

$(document).on('click', 'fieldset', function (event) {
  console.log('触发源元素:', event.target);
  console.log('当前绑定元素:', event.currentTarget);
  console.log('隐藏输入框值:', $(this).find("input[type='hidden']").val());
});

通过查看event.target可以清楚看到两次触发分别来自哪个元素，帮助你精准定位问题。

内容的提问来源于stack exchange，提问作者Mr. PV