时间戳

首页 > 解决方案 > JavaScript 事件侦听器对单选按钮上的标签的作用不同

javascript - JavaScript 事件侦听器对单选按钮上的标签的作用不同

问题描述

我正在尝试将事件侦听器动态添加到 JavaScript 中的一组按钮。但是，只有在单选按钮中单击实际的圆形按钮而不是按钮的标签时，该函数才会正确触发。

function setupRadioBackground(someCard) {
    someCard.querySelectorAll(".form-check-input").forEach((child) => {
        console.log("initial test", someCard);
        child.addEventListener("click", function() {
            console.log(someCard);
            shadeBackground(someCard, child);
        })
    })
}

当函数最初运行时，它会正确显示添加事件侦听器的卡片initial test <card here>。但是，当我someCard在匿名事件侦听器函数中登录时，会得到不同的结果。如果我单击标签，则它会记录第一个 someCard 添加了事件侦听器。但是，如果我单击圆形按钮，它会记录正确的卡并且该shadeBackground功能正常工作。

有没有办法让标签同样影响正确的卡？

最小可重现示例

要重现此问题，请使用按钮添加两张（或更多）卡片。单击第二张卡的无线电输入和标签。单击无线电输入将正确选择它，而单击标签将选择第一张卡的相应无线电输入。（使用“整页”按钮，以更好地显示输出。）

const button = document.querySelector("#clickme");
let counter = 0;

button.addEventListener("click", function() {
    const card = document.createElement("div");
    card.className = "card";
    card.id = `demoCard-${counter}`;
    card.innerHTML = `<div class="card-body">
            <h5 class="card-title">Card title</h5>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
                <label class="form-check-label" for="exampleRadios1">
                    Default radio
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
                <label class="form-check-label" for="exampleRadios2">
                    Second default radio
                </label>
            </div>
        </div>`
       
    document.querySelector(".output").appendChild(card);

    document.querySelector(`#demoCard-${counter}`).querySelectorAll(".form-check").forEach((child) => {
        child.addEventListener("change", function() {
            console.log("you have clicked", child);
        })
    })

    counter += 1;
})
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
    integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
    integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
    crossorigin="anonymous"></script>

<div class="output">
    <button id="clickme">Click Me</button>
</div>

标签： javascriptdom-events

解决方案

您的代码中有多个问题：

  1. 您在同一个表单上拥有多个具有相同 ID 的控件。使用以下代码更新卡片的内部 HTML，以便每张卡片具有不同的单选按钮名称和 ID：

    card.innerHTML = `<div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios${counter}" id="exampleRadios${counter}_1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios${counter}_1">
        Default radio
    </label>
    </div>
    <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios${counter}" id="exampleRadios${counter}_2" value="option2">
    <label class="form-check-label" for="exampleRadios${counter}_2">
        Second default radio
    </label>
</div>`

  2. 您想为特定元素添加事件侦听器，而不是一次又一次地添加所有更改事件。改变：

    document.querySelector(`#demoCard-${counter}`).querySelectorAll(".form-check").forEach((child) => {
  addEventListener("change", function() {
    console.log("you have clicked", child);
  })
})

    到：

    document.querySelector(`#demoCard-${counter}`).querySelectorAll(".form-check").forEach((child) => {
  child.addEventListener("change", function() {
    console.log("you have clicked", child);
  })
})

那应该可以解决您的问题。

之后，您的表单将按预期工作：

const button = document.querySelector("#clickme");
let counter = 0;

button.addEventListener("click", function() {
  const card = document.createElement("div");
  card.className = "card";
  card.id = `demoCard-${counter}`;
  card.innerHTML = `<div class="card-body">
            <h5 class="card-title">Card title</h5>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="exampleRadios${counter}" id="exampleRadios${counter}_1" value="option1" checked>
                <label class="form-check-label" for="exampleRadios${counter}_1">
                    Default radio
                </label>
                </div>
                <div class="form-check">
                <input class="form-check-input" type="radio" name="exampleRadios${counter}" id="exampleRadios${counter}_2" value="option2">
                <label class="form-check-label" for="exampleRadios${counter}_2">
                    Second default radio
                </label>
            </div>
        </div>`

  document.querySelector(".output").appendChild(card);

  document.querySelector(`#demoCard-${counter}`).querySelectorAll(".form-check").forEach((child) => {
    child.addEventListener("change", function() {
      console.log("you have clicked", child);
    });
  });

  counter += 1;
})
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<div class="output">
  <button id="clickme">Click Me</button>
</div>

推荐阅读