Question

要求：

点击相同的单选按钮不应多次触发该事件。
我们可以多次在单选按钮之间移动。

$(function(){

    function teacher(){
        $(this).off('click');
        console.log('teacher off');
    }

    function student(){
        $(this).off('click');
        console.log('student off');
    }

    $('#teacher').on('click', teacher); 
    $('#teacher').click(function(){
        $('#student').on('click', student);
        console.log('student on');      
    });

    $('#student').on('click', student);
    $('#student').click(function(){
        $('#teacher').on('click', teacher);
        console.log('teacher on');      
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" id="student" name="school" value="student" checked>Student
<input type="radio" id="teacher" name="school" value="teacher">Teacher

此代码中的控制台日志不会提供以下模式：

老师，学生

学生关闭，老师

在标题中查看我的问题。

Answer 1

处理此问题的更优雅方法是将change事件与event delegation一起使用。这样我们就不必将事件监听器解除绑定和重新绑定到各个单选按钮。

＆＃13;

$(document).on('change', '[name="school"]', function() {
    var selected = $(this).val();
    console.log('Do something with: ', selected);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" id="student" name="school" value="student" checked>Student
<input type="radio" id="teacher" name="school" value="teacher">Teacher

＆＃13;

Answer 2

如果您只想触发一次事件，则需要使用.one()：

$('#student').one('click', student);

jQuery .one()：

将处理程序附加到元素的事件。 每个事件类型的每个元素最多执行一次处理程序。

如何使用on（）/ off（）激活每个事件？

2 个答案: