问题

Question

问题

我有一些动态生成的HTML（使用JavaScript），其中包含一个带有一些单选按钮的表单。我将事件监听器（使用"change"）添加到所有单选按钮，以便在其值发生更改时调用函数。我已经知道，此事件仅在按钮的“checked”值从false变为true时触发，而不是相反。

为了简化我的代码，我将label标记包裹在input标记周围，以避免为我的单选按钮生成一堆唯一ID。但是，当label标记被围绕无线电输入而不是与无线电输入位于同一范围时，“更改”事件监听器不会即使直接点击按钮本身也会响应。

实施例

我把一个jsfiddle示例放在一起，以显示我在说什么。 JS Fiddle Example 第一组（不起作用）以这种方式生成：

for (var i = 0; i < 3; i++)
{
    var label = document.createElement("label");
    var radio = document.createElement("input");
    radio.setAttribute("type", "radio");
    radio.setAttribute("name", "group1");

    radio.addEventListener("change", function()
    {
        alert("group1 changed!")
    }, false);

    label.appendChild(radio);
    label.innerHTML += "Radio " + (i + 1);
    var br = document.createElement("br");
    g1.appendChild(label);
    g1.appendChild(br);
}

第二组（确实有效）以这种方式生成：

for (var i = 0; i < 3; i++)
{
    var radio = document.createElement("input");
    radio.setAttribute("type", "radio");
    radio.setAttribute("name", "group2");
    radio.setAttribute("id", "g2r" + i);

    radio.addEventListener("change", function()
    {
        alert("group2 changed!")
    }, false);

    var label = document.createElement("label");
    label.setAttribute("for", "g2r" + i);
    label.innerHTML = "Radio " + (i + 1);
    var br = document.createElement("br");
    g2.appendChild(radio);
    g2.appendChild(label);
    g2.appendChild(br);
}

问题

这是一个已知的bug还是什么？是否有某种解决方法？我想保留包装的标签，因为它更容易生成，我认为它更干净，但显然不是以牺牲功能为代价。

谢谢！

Answer 1

我删除了该行：

    label.innerHTML += "Radio " + (i + 1);

来自你的jsFiddle并修复了这个问题。这会破坏你的代码的原因是当你使用innerHTML向另一个元素中添加内容时，你真正要做的就是替换该元素的所有内容。当然，当你使用+ =时，你要保留以前的内容并添加它，但你仍然基本上复制内容，添加它们，然后为你所有的html创建新的DOM ELEMENTS ＃39;重新加入 - 无论是旧内容还是新内容。这意味着绑定到旧内容的任何处理程序都将丢失，因为您将使用新的DOM元素覆盖它们。

如果用这个替换该行：

    label.appendChild(document.createTextNode("Radio " + (i + 1)));

这将附加您正在创建的新文本节点，而无需删除和重新创建任何现有元素，因此您的处理程序仍将存在！这是一个有效的jsFiddle：http://jsfiddle.net/335cQ/13/。

Answer 2

radio.setAttribute("id", "rb");

<style>
#rb
{
    z-index:5;
}
</style>

围绕单选按钮的标签标签可防止单选按钮响应JavaScript中的“更改”事件侦听器

问题

实施例

问题

2 个答案: