Jquery - change event firing on page load.

Question

Hi,

I have select controls on a HTML page and using Jquery to set change event.

But the event fires on the page load and does not fire when I try to change 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 wrong.

By writing change(CalculateHours($(this)), you are calling the CalculateHours function and passing its return value to jQuery's change method as if it were a function. You would only write this if your function returned another function and you wanted to addd the returned function as an event handler.

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

Answer 2

You are attempting to bind the result of CalculateHours to tthe change event. Try this instead.

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