JQuery - change event on page load

Question

I have controls on an HTML page and use jQuery to set a change event.

But the event fires when the page loads and does not fire when I try to change the values ​​in the select controls.

Any ideas why?

$(function() {
    $('select[id^=Start], select[id^=Finish], select[id^=Lunch]').change(CalculateHours($(this)));
});

Answer 1

Your syntax is incorrect.

After writing change(CalculateHours($(this)), you call the function CalculateHoursand pass its return value to the jQuery method change, as if it were a function. You will only write this if your function returns another function, and you want to add the returned function as an event handler.

You need to write .change(function() { CalculateHours($(this)); })

Answer 2

CalculateHours . .

$(function() {
    $('select[id^=Start], select[id^=Finish], select[id^=Lunch]').change(function() { 
        CalculateHours($(this)); 
    });
});