jquery live not firing on first click on a checkbox

I have a strange problem. This code works fine in chrome and firefox, but in IE 8 the live event will not fire the first time I uncheck a box. If I check it and then uncheck again it works every time after that.

My serverside code in the view

<%: Html.CheckBox("select-invoice-" + invoice.InvoiceNumber, 
    true, 
    new { title = "choose to开发者_JAVA百科 not pay anything on this invoice by unchecking this box" }) %>

renders to this

<input checked="checked" id="select-invoice-TST-1001" 
    name="select-invoice-TST-1001" 
    title="choose to not pay anything on this invoice by unchecking this box" 
    type="checkbox" value="true" />

Here is my javascript live event wireup, simplified

$(function () {
    $("[id^='select-invoice-']").live('change', function () {
        var invoiceId = $(this).attr('id').substr('select-invoice-'.length);

        ComputeTotalPayment();

        if ($(this).is(':checked')) {
           //save invoice data
        } else {
            //remove invoice data
        }
    });
});

There are no errors in the javascript on any browser. If I switch IE to compatibility mode the live event never works. Other live events for clicks on links work just fine.

The change event doesn't fire correctly in IE until the checkbox loses focus.

Bug: http://webbugtrack.blogspot.com/2007/11/bug-193-onchange-does-not-fire-properly.html

You'll need to map to the "click" event instead.

I have found that change causes some problems in IE. Try using the click event instead. This appears to fix the problem.

I had a similar problem and solved it by calling .change() once on page load.

$(function () {
$("[id^='select-invoice-']").live('change', function () {
    var invoiceId = $(this).attr('id').substr('select-invoice-'.length);

    ComputeTotalPayment();

    if ($(this).is(':checked')) {
       //save invoice data
    } else {
        //remove invoice data
    }
}).change();
});