在 select 框上过早更改事件触发

Question

这是我的问题的简化版本：

HTML:

<select id="mySelect">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

jQuery:

$('#mySelect').change( function() {
    // do stuff
} );

问题是，当我将鼠标光标移到选项上时，do stuff 发生在我将鼠标悬停在其中一个选项上时，在我实际 select 新选项之前。如何避免这种行为，以便仅当我在 select?

中完成选择新选项时才触发 .change()

编辑 1：更多信息

显然这段代码不会导致所描述的行为。在实际代码中，随着通过 .get() 加载和处理更多数据，select 框正在更新。

编辑 2：更新 select 框的实际函数

此函数是我的代码中的函数，它在加载更多数据后更新 select 框之一。全局变量 padm_courses 是一个课程对象数组，具有 code 和 name 属性用于填充课程过滤器 select 框。

function loadCourseFilter() {
    var selected = '';
    var sel = $('<select>').attr('id','padmCourseFilter');
    $(padm_courses).each(function() {
        sel.append($("<option>").attr('value',this.code).text(this.name));
    });
    if($('#padmCourseFilter').length) {
        selected = $('#padmCourseFilter').val();
        $('#padmCourseFilter').replaceWith(sel);
        if(selected != '') $('#padmCourseFilter option[value="'+escape(selected)+'"]').prop('selected', true);
    } else {
        sel.appendTo('#padm_hub_filters');
    }

    $('#padmCourseFilter').change( function() {
        processMCRsByCourse($('#padmCourseFilter').val());
        var tables = $('.sv-datatable').DataTable();
        tables.rows('.duplicate').remove().draw();
        filterTheBlockFilter();
    } );
}

Answer 1

尝试更改您的更改事件

$(document).on('change', '#mySelect', function() {
    // do stuff
});

Answer 2

好的，我找到了解决办法。似乎在触发时，函数 loadCourseFilter 每次都从头开始重新创建选择框并覆盖旧的选择框。当鼠标悬停在其中一个选项上时，这会导致奇怪的行为。

该功能的修订版仅添加了新选项，如果实际未添加任何内容，则不会更新过滤器...

function loadCourseFilter() {
    var sel, output;
    if($('#padmCourseFilter').length) {
        var count = 0;
        sel = $('padmCourseFilter');
        output = [];

        $(padm_courses).each(function() {
            if($('#padmCourseFilter option[value="'+this.code+'"]').length == 0) {
                count++;
                output.push('<option value="'+this.code+'">'+this.name+'</option>');
            }
        });
        if(count > 0) {
            sel.append(output.join(''));
            sortDropDownListByText('padmCourseFilter');
        }
    } else {
        sel = $('<select>').attr('id','padmCourseFilter');
        $(padm_courses).each(function() {
            sel.append($("<option>").attr('value',this.code).text(this.name));
        });
        sel.appendTo('#padm_hub_filters');
    }

    $('#padmCourseFilter').change( function() {
        processMCRsByCourse($('#padmCourseFilter').val());
        var tables = $('.sv-datatable').DataTable();
        tables.rows('.duplicate').remove().draw();
        filterTheBlockFilter();
    } );
}

在 select 框上过早更改事件触发

Change event triggering too early on select box

javascript

jquery

events

html-select

eventtrigger