JQuery Добавляет событие щелчка к радио-входному тексту
Я не могу не упомянуть еще один прием, который помогает, если у вас есть неизвестное количество аргументов, которые также передаются как часть строки , содержащей имя функции. Например:
var annoyingstring = 'call_my_func(123, true, "blah")';
Если ваш Javascript работает на HTML-странице, все, что вам нужно, это невидимая ссылка; Вы можете передать строку в атрибут onclick и вызвать метод click.
<a href="#" id="link_secret"><!-- invisible --></a>
$('#link_secret').attr('onclick', annoyingstring);
$('#link_secret').click();
Или создайте элемент <a> во время выполнения.
3 ответа
Просто, используйте фактические элементы меток ;
Когда вы используете их, вы не только получаете удобство использования, но и их событие нажатия привязано к щелчку переключателя событие. Другими словами, вам не нужно выполнять какие-либо дополнительные jQuery , просто обновите свой HTML.
Вот он в действии - если у вас есть firebug, вы можете ясно видеть, что $ (this) всегда относится к , независимо от того, нажимаете ли вы на соответствующем
<!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>
Вы можете придумать какую-то технику обхода в соответствии с вашими потребностями, но я рекомендую вам использовать вместо него элемент : не только он семантически правильный способ сделать это, затем вы можете добавить в атрибуте для , чтобы указать его обратно в поле ввода, это метка:
<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, если хотите, чтобы рука поднялась.
<div class="answers">
<label class="answertextwrapper"><input type="radio" name="answer1"/> this is the text</label>
</div>
Это работает лучше всего для меня. Таким образом, вам даже не нужно «подключать» вход к метке через для свойства в элементе label .