JQuery Добавить событие клика к радиовходу - PullRequest
Новая
       2

JQuery Добавить событие клика к радиовходу

8 голосов
/ 21 июля 2009

Хотелось бы, чтобы ярлык ассоциировался с переключателем «горячий». Я начал реализовывать это с помощью метода .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>

Это упрощено, но близко. Я хочу записать событие click для элемента с class = "answertextwrapper", т.е. $ (". Answerwrapper"). Click

Так что мне нужно как-то ссылаться на ввод при нажатии на текст. Имеет смысл?

Есть идеи?

Ответы [ 3 ]

30 голосов
/ 21 июля 2009

Простой, используйте фактические элементы метки ;

Когда вы используете их, вы не только получаете хорошее удобство использования, но их событие щелчка привязывается к событию щелчка переключателя. Другими словами, вам не нужно делать никаких дополнительных jQuery , просто обновите ваш HTML.

Здесь это в действии - если у вас есть firebug, вы можете ясно видеть, что $ (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>
5 голосов
/ 21 июля 2009

Вы можете придумать какую-то технику обхода, чтобы удовлетворить ваши потребности, но я рекомендую вместо этого использовать элемент <label> : это не только семантически правильный способ сделать это, вы можете затем добавьте атрибут 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 (подробнее см. Комментарии). Я также удалил пустую ссылку, так как это тоже плохая практика. Вы должны просто добавить объявление курсора в свой CSS вместо этого, если хотите, чтобы рука поднялась.

2 голосов
/ 22 июля 2009 
<div class="answers">
<label class="answertextwrapper"><input type="radio" name="answer1"/> this is the text</label>
</div>

Это работает лучше всего для меня. Таким образом, вам даже не нужно «подключать» вход к метке через свойство для в элементе label .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...