how do i add a selector change event to this?

Question

Here is my jquery which works great

$(document).ready(function(){
    $('#new_average, #max_occupancy').keyup(function(){
        factor = $(".industry_picker option:checked").attr("title");
        average = $('#new_average').val();
        if($('#new_average').val().indexOf("$") != -1){
            average = average.substring(1);                                                     
        }
        if($("#max_occupancy").val() != ""){
            max_occupancy = $("#max_occupancy").val();
            max_total = ((average * factor) * max_occupancy) * 30;
            if(factor != ""){
                $("#new_calc").val("$" + max_total + ".00");
            }

        }                                                   
    });
});

but the problems is I need this to fire off on keyup and on

 $(".industry_picker") 

changed ....i know I can copy this exact functionality over and have a

 $(".industry_picker").change 

but i feel that is a hack...is there a better way of having the

$('#new_average, #max_occupancy").keyup 

and

$(".industry_picker").change  

in the same selector or a better way of achieving this without copying the entire function again

Answer 1

Don't use an anonymous function.

function myCallback(){
    factor = $(".industry_picker option:checked").attr("title");
    average = $('#new_average').val();
    if($('#new_average').val().indexOf("$") != -1){
        average = average.substring(1);                                                     
    }
    if($("#max_occupancy").val() != ""){
        max_occupancy = $("#max_occupancy").val();
        max_total = ((average * factor) * max_occupancy) * 30;
        if(factor != ""){
            $("#new_calc").val("$" + max_total + ".00");
        }

    }
}

$('#new_average, #max_occupancy').keyup(myCallback);
$('.industry_picker').change(myCallback);

Side note: you're not using var anywhere, which means that there is only one copy of each of these variables: factor , average , max_occupancy , and max_total . Introducing global state is sloppy coding and makes programs harder to maintain and debug. Declare your variables with var .

Recommended reading: MDC var docs .

Answer 2

You can use

$('#new_average, #max_occupancy').keyup(Myfunction);

$(".industry_picker").change(Myfunction);

function Myfunction(){
factor = $(".industry_picker option:checked").attr("title");
    average = $('#new_average').val();
    if($('#new_average').val().indexOf("$") != -1){
        average = average.substring(1);                                                     
    }
    if($("#max_occupancy").val() != ""){
        max_occupancy = $("#max_occupancy").val();
        max_total = ((average * factor) * max_occupancy) * 30;
        if(factor != ""){
            $("#new_calc").val("$" + max_total + ".00");
        }

    }    
}

Answer 3

Don't assign your function directly to the event handler, but to a local variable ans assign that to both:

var myHandler = function() { ... };
$('#new_average, #max_occupancy').keyup(myHandler);
$(".industry_picker').change(myHandler);