изменение jQuery и время события щелчка

Кажется, у меня проблема с синхронизацией с моим изменением jQuery и событиями щелчка. На моем сайте у меня есть сообщение Ajax вместо предупреждения, но его легче воспроизвести с помощью предупреждения. У меня есть простая HTML-страница с использованием jQuery версии 1.7.1.

Сценарий редактирует текстовое поле, а затем непосредственно щелкает кнопку. Событие изменения всегда запускается, но если оно содержит предупреждение, событие щелчка никогда не вызывается. Если я обманываю и устанавливаю тайм-аут вокруг предупреждения (возможно, вам придется немного поиграть со значениями там), событие щелчка вызывается нормально.

/ ** РЕДАКТИРОВАТЬ ** / Если вы установите точку останова где-нибудь в событии изменения и подождите несколько секунд, событие щелчка также не сработает.

<script type="text/javascript">
$(document).ready(function ()
{
    $("input[type=text]").change(function () {
        //alert('changed');

        $("#text").text('changed');

        setTimeout(function () {
            $("#text").text('changed timeout');
            alert('changed');
        }, 100);

    });

    $("input[type=submit]").click(function () {
        alert('clicked');
        $("#text").text('clicked');
    });
});
  </script>
  <div id="main">
    <div class="container">
        <input type="text" />
        <input type="submit" value="click me" />
        <div id="text" >bla</div>
    </div>
  </div>

Мой вызов Ajax с сохранением поведения выглядит следующим образом:

$.ajax({
        type: 'POST',
        url: postUrl,
        data: form.serialize(),
        beforeSend: function () {
            // display overlay for work in progress
        },
        success: function (result) {
            updateTableSuccess();
        },
        complete: function () {
            // hide overlay for work in progress
        },
        error: function (jqXHR) {
            if (jqXHR.responseText.length > 0) {
                showErrorMessage(jqXHR.responseText);
            }
        }
    });

Оверлей просто добавляет 2 блока к тегу body.

/ ** Изменить ** / Похоже, что реальная проблема заключается в наложении, которое вызывает такое же поведение, как и предупреждение, и останавливает активацию события клика.

showWorkInProgress = function (message, elementId)
{
    if ($("#overlay").length == 0)
    {
        $("<div id='overlay' class='ui-widget-overlay'></div>").appendTo("body");
    }

    if ($("#workInProgress").length == 0)
    {
        $("<div id='workInProgress'></div>").appendTo("body");
    }

    $("#workInProgress").html(message);
    if (elementId != null)
    {
        $("#workInProgress").center(elementId);
    }
    else
    {
        $("#workInProgress").center();
    }
    $("#overlay").show();
    $("#workInProgress").show();
};

Может ли кто-нибудь объяснить, почему jQuery ведет себя так и как я мог бы сделать это лучше без взлома setTimeout?

Спасибо за любую помощь =)