Add jQuery change event to a <select> object that survives (and doesn't fire) on ajax update

Question

I'm working on a shipping estimation box as part of a checkout page. I want to bind a .change() jQuery event to my select box, which then reloads the form with an ajax request.

Initially I tried:

$('select.shipping-updater').live("change", function() {
        $('#shipping_estimation_button').click();
});

However this would fire as soon as the select box was reloaded by the ajax call resulting in a page reload

Is there a way to bind the change event when the user clicks the selector?

Edit: this works, but is maybe not very elegant.

$('select.shipping-updater').live("click", function() {
        $('select.shipping-updater').change( function() {
                $('#shipping_estimation_button').click();
        });
});

Answer 1

How about flagging the selector?

AKA

$('select.shipping-updater').click(function(){
    $(this).addClass("clicked");
}).blur(function(){
    $(this).removeClass("clicked");
});

$('select.shipping-updater.clicked').change(function(){
    $('#shipping_estimation_button').click();
});