合并jQuery事件方法的正确方法

我正在尝试优化我的代码。

我目前有两个单独的调用w/一个代码块，每个代码块都做足够多的相同的事情。我知道，如果我正在查看具有相同事件方法(例如。click)的两个独立项目，我可以简单地在。

中添加额外的选择器。

但是我同时使用on click和on change。

编辑:#walking和#driving是单选按钮，#narrow是选择框。

这是我目前拥有的:

// When a place type is selected
$('#narrow').on('change', function() {
    
    // Clear the current results
    $('#place_results_wrap').empty();
    
    // Show progress
    
    $('#place_results_wrap').html('' +
        '<div id="load_container">' +
            '<div id="load">' +
            '<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading</span>' +
            '<div id="status"><h3>Please wait...</h3></div>' +
        '</div>');
    
    
    // Temp disable the narrow
    $("#narrow").prop("disabled", true);
    
    setTimeout(function() {
        $("#narrow").prop("disabled", false); 
    }, 15000);
    
    // Grab the current transport method
    var mode = $('input[name=travelmode]:checked').val().toLowerCase();
    
    // Load page into results div
    $('#place_results_wrap').load('/assets/php/places.php?type=' + this.value + '&mode=' + mode, '&latlon=' + latlon, function() {
        $('html, body').animate({
            scrollTop: $(".place_results").offset().top
        }, 500);
    });
});
    
    
// If the travel type is changed
$('#walking, #driving').click(function(){
    
    // Grab the current place type
    var place_type = $('select#narrow').val();
    
    // If it has been specified
    if(place_type)
    {
        // Clear the current results
        $('#place_results_wrap').empty();
            
        // Show progress
        
        $('#place_results_wrap').html('' +
            '<div id="load_container">' +
                '<div id="load">' +
                '<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading</span>' +
                '<div id="status"><h3>Please wait...</h3></div>' +
            '</div>');
        // Temp disable the travel type
        $("#driving, #walking").prop("disabled", true);
        
        setTimeout(function() {
            $("#driving, #walking").prop("disabled", false);
        }, 15000);
    
        // Grab the current category    
        var type = $('select#narrow').val();
        
        // Grab the current transport method
        var mode = this.value.toLowerCase();    
        
        // Load page into results div
        $('#place_results_wrap').load('/assets/php/places.php?type=' + type + '&mode=' + mode, '&latlon=' + latlon, function() {
            $('html, body').animate({
                scrollTop: $(".place_results").offset().top
            }, 500);
        });    
    }
});

是否有一种方法可以让我合并#narrow change和#walking， #driving click?

// When a place type is selected
function onChange() {
    // Clear the current results
    $('#place_results_wrap').empty();
    // Show progress
    $('#place_results_wrap').html('' +
        '<div id="load_container">' +
            '<div id="load">' +
            '<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading</span>' +
            '<div id="status"><h3>Please wait...</h3></div>' +
        '</div>');

    // Temp disable the narrow
    $("#narrow").prop("disabled", true);
    setTimeout(function() {
        $("#narrow").prop("disabled", false); 
    }, 15000);
    // Grab the current transport method
    var mode = $('input[name=travelmode]:checked').val().toLowerCase();
    // Load page into results div
    $('#place_results_wrap').load('/assets/php/places.php?type=' + this.value + '&mode=' + mode, '&latlon=' + latlon, function() {
        $('html, body').animate({
            scrollTop: $(".place_results").offset().top
        }, 500);
    });
}
$('#narrow').on('change', onChange);

// If the travel type is changed
$('#walking, #driving').click(function(){
    // Grab the current place type
    var place_type = $('select#narrow').val();
    // If it has been specified
    if(place_type)
    {
        onChange();    
    }
});