JQuery将点击事件添加到单选输入文本答案

【问题标题】：JQuery Add click event to radio input textJQuery将点击事件添加到单选输入文本
【发布时间】：2009-07-21 19:23:33
【问题描述】：

我想要与单选按钮“热”相关的标签。我开始使用 .siblings() 方法来实现它。我认为必须有更好的方法。单选按钮上的点击事件如下所示：

$(".RadioButton").click(function(event) {

        var questionId = $(this).find('input').attr('name');
        var responseId = $(this).find('input').attr('value');
        var answerText = displayPopupQuizAnswer($(this));

这很好用。当用户单击单选按钮随附的文本标签时，我希望执行相同的代码。 html 看起来像这样：

<div class="answers">
<span class="radiobutton>
<input type="radio" name="answer1"/>
</span>
<span class="answertextwrapper">
<a href="return false">this is the text</a>
</span>
</div>

这是简化的，但很接近。我想要的是用 class="answertextwrapper" 即 $(".answerwrapper").click

捕获元素上的点击事件

所以我需要在单击文本时以某种方式引用输入。有意义吗？

有什么想法吗？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

简单，使用实际的label elements；

当您使用这些时，您不仅获得了很好的可用性，而且它们的点击事件绑定到单选按钮的点击事件。换句话说，你不需要做任何额外的 jQuery，只需更新你的 HTML。

它在起作用 - 如果你有萤火虫，你可以清楚地看到 $(this) 总是指的是<input>，不管你是否真的点击了相应的<label>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(function()
{
  $('input.quiz-button').click( function( event )
  {
    console.log( $(this) );
  })
} );

</script>

</head>
<body>
  <form id="test" name="tester">
    <input class="quiz-button" type="radio" name="answer1" id="answer1"/>
    <label for="answer1">this is the text 1</label>
    <input class="quiz-button" type="radio" name="answer2" id="answer2"/>
    <label for="answer2">this is the text 2</label>
  </form>
</body>
</html>

【讨论】：

你应该得到一个 +1 只是因为 Paolo 不知道这一点。 @Paulo - 你是 jQuery 的 Jon Skeet :-)
谢谢！公平地说，这是 DOM 事件，而不是 jQuery。此外，更准确的说法可能是“点击<label> 会自动从它已连接的<input> 分派点击事件——因为<label> 元素确实会分派一个不同的点击事件。这意味着点击带有已连接标签的标签input 实际上调度了两个几乎同时的点击事件，标签的点击首先调度。
我喜欢萤火虫控制台.. 我自己才了解它。这是一个正确的答案，但是我现在没有改变我的元素的奢侈。
quirksmode.org/dom/tests/labels.html 说有些浏览器只能部分工作。此外，我没有在 DOM 事件规范中看到任何指定此行为的地方。标签。
@ChrisW HTML 4 spec describes the behaviour here - 具体来说：“当 LABEL 元素获得焦点时，它会将焦点传递给其关联的控件。”

【解决方案2】：

您可以提出某种遍历技术来满足您的需求，但我建议您改用<label> element：这不仅是语义上正确的方法，您还可以添加for属性将其指向输入字段，它是一个标签：

<div class="answers">
    <span class="radiobutton>
       <input type="radio" name="answer1" id="answer1"/>
    </span>
    <label class="answertextwrapper" for="answer1">
        this is the text
    </label>
</div>

然后你的 Javascript 可以如下所示：

$("span.RadioButton").click(function(event) {
    //...
});

请注意，当您在 Javascript 中进行类选择器时，最好在标签名称前面添加更多（更多信息请参见 cmets）。我还删除了空链接，因为这样做也是一种不好的做法。如果你想让手伸出来，你应该在 CSS 中添加光标声明。

【讨论】：

为什么它“好得多”？只是为了可读性还是为了提高性能？
有一个巨大的性能提升。使用类选择器，jQuery 必须查看文档中的每一个元素以查看它是否具有您所要求的类。如果你使用 span.classname，jQuery 可以使用本机（和快速）getElementsByTagName，然后按类名过滤掉。

【解决方案3】：

<div class="answers">
<label class="answertextwrapper"><input type="radio" name="answer1"/> this is the text</label>
</div>

这对我来说是最好的。这样，您甚至不需要通过 label 元素中的 for 属性将输入“连接”到标签。

【讨论】：

做得很好。我没有意识到您可以将单选按钮包装在这样的标签中！