javascript - 带有 "event.target"太多递归的 jquery

Question

我试图在单击 LI 时选择一个单选框。但是我收到错误“太多递归”。

$("li.user_line").click(function(event) {
  if ($(event.target).is('li.user_line')) {
    $(this).children("input[type=radio]").click();
    alert($("input[name=user_chk]").val());
  }
});

Answer 1

您收到错误是因为 input[type=radio] 是被点击元素的子元素。单击它会将 DOM 冒泡到 li，然后单击单选按钮，然后单击 li，然后单击单选按钮...

要解决此问题，您只需将 radio 的 checked 属性设置为 true。无需在其上引发点击事件。

$("li.user_line").click(function(event) {
  $(this).children("input[type=radio]").prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="user_line">
    <input type="radio" />
    Click anywhere here to select the radio
  </li>
</ul>

请注意，我删除了多余的 is() 方法调用。由于您使用的 jQuery 选择器，结果将始终为 true。另请注意，您在此处创建的效果可以使用 label 元素单独在 HTML 中实现。