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();
});