javascript - 如何获取使用 jQuery 单击的动态加载元素

Question

我正在将内容动态加载到我的页面中。单击其中一张图像时，我需要取消选择所有其他图像并选中已单击图像的复选框。如果单击复选框的图像、文本，我需要执行此操作。

this 包含所有 li 元素，而不仅仅是被点击的元素。 谁能建议我如何识别哪些 li 元素触发了代码？

$('#colours').click('li', function() {
  $(this).children('li').find('input').prop('checked', false);
  $(this).find('input').prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="colours">
  <li>
    <label for="">
            <img src="swatch-1.jpg" alt=""><input type="checkbox" value="1"> <span>Red</span>
        </label>
  </li>
  <li>
    <label for="">
            <img src="swatch-2.jpg" alt=""><input type="checkbox" value="2"> <span>Green</span>
        </label>
  </li>
  <li>
    <label for="">
            <img src="swatch-3.jpg" alt=""><input type="checkbox" value="3"> <span>Blue</span>
        </label>
  </li>
</ul>

Answer 1

首先，您似乎正在尝试创建委托(delegate)事件处理程序，但是您的语法不正确，这就是问题的原因。您需要使用带有事件名称和选择器的 on() 而不是 click。从那里您可以直接使用 this 引用选择 li，如下所示:

$('#colours').on('click', 'li', function() {
  $('#colours li').find('input').prop('checked', false);
  $(this).find('input').prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="colours">
  <li>
    <label>
      <img src="swatch-1.jpg" alt="">
      <input type="checkbox" value="1"> 
      <span>Red</span>
    </label>
  </li>
  <li>
    <label>
      <img src="swatch-2.jpg" alt="">
      <input type="checkbox" value="2"> 
      <span>Green</span>
    </label>
  </li>
  <li>
    <label>
      <img src="swatch-3.jpg" alt="">
      <input type="checkbox" value="3">
      <span>Blue</span>
    </label>
  </li>
</ul>

但是，您在此处创建的行为(一次只能选中一个复选框)与 radio 输入元素的标准行为相同。因此，只使用它们会更有意义。这样你根本不需要任何 JS 代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="colours">
  <li>
    <label>
      <img src="swatch-1.jpg" alt="">
      <input type="radio" name="swatch" value="1">
      <span>Red</span>
    </label>
  </li>
  <li>
    <label>
      <img src="swatch-2.jpg" alt="">
      <input type="radio" name="swatch" value="2">
      <span>Green</span>
    </label>
  </li>
  <li>
    <label>
      <img src="swatch-3.jpg" alt="">
      <input type="radio" name="swatch" value="3">
      <span>Blue</span>
    </label>
  </li>
</ul>