我有几个带有单选按钮的元素。我想做的是在当前可见元素内的那些单选按钮上为更改函数创建一个事件侦听器。这是一个示例:
$(function() {
$('.form.current input[type=radio]').change(function () {
var selection = $(this).val();
console.log(selection);
});
$('button').click(function() {
var $currForm = $('.form.current')
$currForm.removeClass('current');
$currForm.next().addClass('current');
});
});
.form {
display:none;
}
.form.current {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-container">
<div class="form current">
<label><input name="color" type="radio" value="red">Red</label>
<label><input name="color" type="radio" value="blue">Blue</label>
</div>
<div class="form">
<label><input name="size" type="radio" value="small">Small</label>
<label><input name="size" type="radio" value="large">Large</label>
</div>
</div>
<button>Show next form</button>
不幸的是,这仅适用于初始形式,我猜这是因为change
函数绑定到了加载了current
类的任何元素上。如何更改此方法,以便在任何给定时间change
函数始终可以与具有current
类的任何元素一起使用?