动态生成复选框无法触发change事件及取值异常问题

问题概述 #

动态生成的复选框点击时无法触发change事件，使用$(document).on("change", ".integration-event-checkbox", ...)事件委托后，仍无法获取选中的复选框来更新URL。

代码示例 #

HTML文件(index.html) #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple Choice Question with URL</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<body>

  <h2>Which events would you like to include in the URL?</h2>

  <form id="checkboxes">
    <label>
      <input type="checkbox" name="optionA" value="A" > A
    </label>
    <br>

    <label>
      <input type="checkbox" name="optionB" value="B" > B
    </label>
    <br>

    <label>
      <input type="checkbox" name="optionC" value="C" > C
    </label>
    <br>

    <label>
      <input type="checkbox" name="optionD" value="D" > D
    </label>
    <br>

    <label for="url">URL:</label>
    <input type="text" id="url" name="url" value="xyz.com" readonly>
  </form>

 <script src="script.js"></script>

</body>
</html>

JavaScript文件(script.js) #

$(document).ready(function() {
    const $checkboxes = $("#checkboxes");
    const integration = [ {all:["push","pull"]},{all:["post","get"]},{all:["put","delete"]}]
    const $eventCheckboxes = $(".integration-event-checkbox");

    // This event handler is not being triggered for dynamically generated checkboxes
    // $(document).on("change", ".integration-event-checkbox", (e) => {
    //     console.warn("Checkbox changed");
    //     console.warn("event",e);
    //     update_url();
    //     e.preventDefault();
    //     e.stopPropagation();
    // });

    const events = display_box(integration[0].all)
    $checkboxes.html(events);

    function display_box(integration){
      const checkboxesHTML = integration.map(item => `
          <label>
              <input type="checkbox" class="integration-event-checkbox" value="${item}" />
              ${item}
          </label>
      `).join('');

          return checkboxesHTML;
    }

    function update_url() {
        const selectedEvents = $eventCheckboxes.filter(":checked").map(function () {
            return this.value;
        }).get().join(",");
        console.log("SELECTED EVENTS: ", selectedEvents);
        // Add the checked events to the URL
        const eventsParam = selectedEvents.length > 0 ? `&events=${selectedEvents}` : '';
        console.log("Events Param: ", eventsParam);

        console.log("event checkboxes: ", $eventCheckboxes);
    }
});

问题细节 #

• $(document).on("change", ".integration-event-checkbox", ...)事件处理器无法捕获动态生成复选框的变化。
• 使用$eventCheckboxes.filter(":checked").map(...)获取选中复选框时，selectedEvents和$eventCheckboxes集合均为空。

复现步骤 #

1. 使用JavaScript动态生成复选框。
2. 使用$(document).on("change", ".integration-event-checkbox", ...)绑定change事件。
3. 点击动态生成的复选框，观察到change事件未触发。
4. 尝试使用$eventCheckboxes.filter(":checked").map(...)获取选中复选框，结果为空。

预期行为 #

动态生成的复选框应能触发change事件，代码应能正确获取并显示选中的复选框。

尝试过将$iec变量用let代替const重新初始化，并调整代码位置，但问题仍未解决。

问题根源 #

1. 事件委托代码被注释：原代码中事件委托的代码处于注释状态，根本未生效，所以动态复选框的change事件不会被触发。
2. $eventCheckboxes初始化时机错误：在动态生成复选框之前就初始化了$eventCheckboxes，此时DOM中还没有.integration-event-checkbox元素，导致这个jQuery集合为空，后续无法获取到动态生成的复选框。

修复后的代码 #

$(document).ready(function() {
    const $checkboxes = $("#checkboxes");
    const integration = [ {all:["push","pull"]},{all:["post","get"]},{all:["put","delete"]}]

    // 启用事件委托，监听动态生成的复选框
    $(document).on("change", ".integration-event-checkbox", (e) => {
        console.warn("Checkbox changed");
        console.warn("event",e);
        update_url();
        e.preventDefault();
        e.stopPropagation();
    });

    const events = display_box(integration[0].all)
    $checkboxes.html(events);

    function display_box(integration){
      const checkboxesHTML = integration.map(item => `
          <label>
              <input type="checkbox" class="integration-event-checkbox" value="${item}" />
              ${item}
          </label>
      `).join('');

          return checkboxesHTML;
    }

    function update_url() {
        // 每次调用时重新获取最新的复选框元素
        const $eventCheckboxes = $(".integration-event-checkbox");
        const selectedEvents = $eventCheckboxes.filter(":checked").map(function () {
            return this.value;
        }).get().join(",");
        console.log("SELECTED EVENTS: ", selectedEvents);
        
        // 更新URL输入框的值
        const baseUrl = $("#url").val().split('&events=')[0];
        const eventsParam = selectedEvents.length > 0 ? `&events=${selectedEvents}` : '';
        $("#url").val(baseUrl + eventsParam);
        
        console.log("Events Param: ", eventsParam);
        console.log("event checkboxes: ", $eventCheckboxes);
    }
});

关键修复点 #

• 启用事件委托：取消事件委托代码的注释，确保事件能监听动态生成的元素。
• 延迟获取复选框集合：在update_url函数内部每次重新查询.integration-event-checkbox元素，确保获取到最新的动态生成复选框。
• 实现URL更新逻辑：添加了实际修改URL输入框值的代码，满足需求。

内容的提问来源于stack exchange，提问作者Sujal__shah