javascript - 事件虽然注册一次，但事件被触发多次

Question

我已经定义了 $('#userUVEdit-modal').on('click' 事件，如下所示。它已在另一个点击事件中注册。但我不知道为什么它会被触发更多不止一次。

$('#usersTable').on('click','.uv-user-edit-btn', function (event) {
    event.preventDefault();
    var rowData =   getJqGridRowData($(this).closest('tr'));
    var selectedUserID = $(rowData.userId).find('.uv-user-edit-btn').attr('value');
    var isInstanceAlreadyAssigned = $(rowData.instanceName).attr('id');
    if(isInstanceAlreadyAssigned && typeof isInstanceAlreadyAssigned != undefined) {
        instanceId = isInstanceAlreadyAssigned;
    }else {
        instanceId = -1;
    }

    $('#edit-uv-username').val($(rowData.username).html());

    var requests_interface  =   new requests_interface_instance.getAllInstances();
    requests_interface.init(requests_callback_instance.getAllInstancesCallBack);
    requests_interface.execute();

    // THE FOLLOWING FUNCTION IS FIRED MORE THAN ONCE
    $('#userUVEdit-modal').on('click','#userUVEditButton', function(event) {
        event.preventDefault();
        var result = validateRequiredFields('#userUVEdit-modal');
        if(result['status']) {
            var dataObj =   createFormObject('#userUVEdit-modal');
            dataObj['user_id'] = selectedUserID;
            dataObj['instanceId'] = instanceId; // Tells the previous instance allotted
            var requests_interface  =   new requests_interface_instance.mapUserToInstance();
            requests_interface.dataObj = dataObj;
            requests_interface.init(requests_callback_instance.mapUserToInstanceCallBack);
            requests_interface.execute();
        }
    });
});

当点击#userUVEditButton时，$('#userUVEdit-modal').on('click','#userUVEditButton', function(event) { 将被解雇，但被解雇了不止一次。这可能是什么原因？

Answer 1

我认为这是因为每次单击 .uv-user-edit-btn 时，您都会在 #userUVEditButton 上绑定(bind)单击事件。尝试 off() 函数，该函数将删除事件处理程序，然后 on() 函数将在元素上添加事件处理程序。

示例:

$('#userUVEdit-modal').off().on('click','#userUVEditButton', ...