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

由于事件传播而发生这种情况。每次点击li时，您都会以编程方式点击其子级input，将点击次数传回其父级li，点击其子级等。

为什么不切换支票而不是点击？

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

.user_line {
  padding: 50px;
  border: 1px solid #018bbc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="user_line"><input type="radio"></li>
<li class="user_line"><input type="radio"></li>
<li class="user_line"><input type="radio"></li>
<li class="user_line"><input type="radio"></li>

Answer 2

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

要解决此问题，您只需将广播的checked属性设置为true即可。没有必要在其上引发点击事件。

＆＃13;

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

＆＃13;

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

＆＃13;

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

jquery用“event.target”过多的递归

2 个答案: