jquery，单击事件有时不起作用

我有多个

input type=“radio”

表单，旁边有文本。我想隐藏那些

输入

，只显示文本，它会在单击时做出反应，并更改

输入的值

和背景色

HTML:

问题是，当我单击收音机旁边的文本（例如A）时，会弹出两个警报，背景颜色也会改变，但如果我再次单击该文本，我只会收到第一个警报，而不会收到第二个警报。为什么？ 在第一次警报之后，有

$（e.target）.children（“输入”）。单击（）

应该运行该更改事件，但它没有，尽管没有任何条件

---

有谁能给我一个关于什么问题的建议吗？谢谢

请检查此解决方案：

// Bind click event on divs and send it to radio input
$("div.right div div").unbind("click").bind("click", function(e){
if(!$(e.target).is("input") )
{
    alert("Clicked Div/Text!")
    $(e.target).children("input").attr("checked", "checked");
    $(e.target).children("input").trigger("change");
}
});

// Hide all radio inputs, make only texts visible
$("div.right input[type='radio']").hide();

// Bind change event on radio inputs, change
// background-color of text that is next to clicked radio input
$("div.right input[type='radio']").unbind("change").bind("change", function(e){
    alert("change Event "+$(e.target).is(":checked"));
    if( $(e.target).is(":checked") )
    {
        $(e.target).parent().css("background-color", "#A00");
    }
    else
    {
        $(e.target).parent().css("background-color", "#00A");
    }
});

---

问题是您使用单选按钮作为输入元素。一旦选中，再次单击它们将不会取消选中它们，因此不会“更改”它们的状态。除非您单击属于同一组的其他单选按钮，否则不会。这意味着，如果单击同一元素两次，更改功能将不起作用

---

尝试使用复选框，它将起作用->

问题是您正在使用更改事件，第二次单击收音机时不会触发该事件，因为它不会更改。但是，根据您的代码，您可能需要考虑使用标签，这将允许在除了IE8之外的每一个现代浏览器中使用纯CSS获得相同的效果。唯一的问题是标签必须跟随输入

使用标签重做HTML：

<input type="radio" id="radioa" name="radio[1]" class="rg1" value="1" />
<label for="radioa">A</label>
<input type="radio" id="radiob" name="radio[1]" class="rg1" value="2" />
<label for="radiob">B</label>
<input type="radio" id="radioc" name="radio[1]" class="rg1" value="3" />
<label for="radioc">C</label>

---

就这样。我继续为收音机和复选框制作了它，因为两者都是可检查的，但正如我所说的，它只在其

的情况下工作，因为CSS不（也可能永远不）允许父选择器，也不允许前面的兄弟选择器。如果该命令不是一个选项，那么您可以通过js重新执行该命令。

为什么会收到第二个警报？这不是只有在输入发生变化时才发生的吗？在第二种情况下，它不会改变。另外，您熟悉标签元素吗？这将为您节省很多步骤，因为默认情况下，他们在单击时选择目标，而不需要额外的js。我考虑的是

label

，但我认为元素的“name”上的“for”链接属性不是“id”。。。不管怎样，它也适用于

div

，我总是觉得它应该用于元素名称，而不是id，因为名称是表单数据中传递的内容，但实际上，标签使用的是元素id，这对于每个输入都有标签但都需要相同名称的收音机来说特别有意义（所以标签必须指向元素的一个独特方面）。看看我是如何做同样的事情的……事实上，我收回这一点。如果我愿意将标签放在我的输入之后（这是可以的，因为它是隐藏的），我可以用CSS做所有的事情。我会把它作为一个答案发布，看一看。谢谢你，你是对的，我没有意识到这一点，现在我稍微修改了代码，它现在可以工作了：）非常有趣：）。。。虽然我需要根据

收音机的值更改背景色，但我想这可以通过添加另一个
[]
选择器来完成。。。我会考虑在纯CSS中改写我的代码，谢谢
// Bind click event on divs and send it to radio input
$("div.right div div").unbind("click").bind("click", function(e){
if(!$(e.target).is("input") )
{
    alert("Clicked Div/Text!")
    $(e.target).children("input").attr("checked", "checked");
    $(e.target).children("input").trigger("change");
}
});

// Hide all radio inputs, make only texts visible
$("div.right input[type='radio']").hide();

// Bind change event on radio inputs, change
// background-color of text that is next to clicked radio input
$("div.right input[type='radio']").unbind("change").bind("change", function(e){
    alert("change Event "+$(e.target).is(":checked"));
    if( $(e.target).is(":checked") )
    {
        $(e.target).parent().css("background-color", "#A00");
    }
    else
    {
        $(e.target).parent().css("background-color", "#00A");
    }
});

<input type="radio" id="radioa" name="radio[1]" class="rg1" value="1" />
<label for="radioa">A</label>
<input type="radio" id="radiob" name="radio[1]" class="rg1" value="2" />
<label for="radiob">B</label>
<input type="radio" id="radioc" name="radio[1]" class="rg1" value="3" />
<label for="radioc">C</label>

[type=checkbox], [type=radio] {
    display: none;
}    

[type=checkbox] + label, [type=radio] + label {
     background-color: #00A;
}

:checked + label {
     background-color: #A00;
}