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中选择新选项时才会触发.change()？

修改1：更多信息

显然，此代码不会导致描述的行为。在实际代码中，正在更新选择框，因为通过.get()加载了更多数据并进行了处理。

编辑2：更新选择框的实际功能

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

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();
    } );
}

更改事件在选择框中过早触发

2 个答案: