如何使用on(）/of(）激活每个事件一次

How to activate each event once using on()/off()?

本文关键字：事件 一次 of 何使用 on 激活      更新时间：2024-03-29

要求：

  1. 单击同一单选按钮不应多次触发事件。

  2. 我们可以在单选按钮之间移动很多次。

$(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

此代码中的控制台日志没有给我以下模式：

老师不在，学生在

学生休息，老师在

请参阅标题中的问题。

处理此问题的一种更优雅的方法是使用带有事件委派的change事件。这样，我们就不必不断地将事件侦听器解除绑定和重新绑定到各个单选按钮。

$(document).on('change', '[name="school"]', function() {
    var selected = $(this).val();
    console.log('Do something with: ', selected);
});
<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

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

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

jQuery.one（）：

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

相关文章：