无法检测动态生成的复选框的更改

Question

描述：

我面临的问题是，动态生成的复选框在单击时不会触发更改事件。为了解决这个问题，我使用

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

集合均为空。

重现步骤：

使用 JavaScript 动态生成复选框。

使用

$(document).on("change", ".integration-event-checkbox", ...)

附加更改事件。

单击动态生成的复选框并观察是否缺少更改事件触发。
尝试使用
```
$eventCheckboxes.filter(":checked").map(...)
```
检索选中的复选框，并注意结果为空。

预期行为：

动态生成的复选框应触发更改事件，并且代码应正确检索并显示选中的复选框。

我尝试通过使用 let 而不是 const 重新初始化 $iec 变量来解决该问题。我尝试将代码移至重新初始化点的上方和下方，旨在确保变量正确捕获动态生成的复选框。

预期行为：

动态生成的复选框应触发更改事件，并且代码应正确检索并显示选中的复选框。

Answer 1

您可以通过更改来修复它

const selectedEvents = $eventCheckboxes.filter(":checked").map(function () { return this.value; }).get().join(",");

到

const selectedEvents = $(".integration-event-checkbox").filter(":checked").map(function () { return this.value; }).get().join(",");

$eventCheckboxes

变量还没有动态添加的复选框。

无法检测动态生成的复选框的更改

问题描述投票：0回答：1

1个回答

最新问题

无法检测动态生成的复选框的更改

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1