jQuery внутри причудливой коробки ajax не работает - проблемы с инициализацией

Question

Это мой код для открытия Fancybox, который загружает страницу через ajax:

$('tr.record').click(function() {
    var record_id = $(this).attr("id");
    var link = 'http://' + window.location.hostname + '/expenses/expenses_edit/' + record_id;
    $.fancybox({
        'transitionIn': 'fade',
        'transitionOut': 'none',
        'type': 'ajax',
        'href': link,
        'onClosed': function() {
            parent.location.reload(true);
        }
    });
    $.bind("submit", function() {

        $.fancybox.showActivity();

        $.ajax({
            type: "POST",
            cache: false,
            data: $(this).serializeArray(),
            success: function(data) {
                $.fancybox(data);
            }
        });
        return false;
    });
});

Страница внутри fancybox имеет форму, включающую текстовое поле со счетчиком символов:

<form>
...

<textarea name="exp_det" cols="90" rows="12" id="exp_det"></textarea>
<span id="charLeft">150</span> characters left

</form>

Родительская страница загружает это через заголовок:

$('#ext_det').keyup(function() {
    var len = this.value.length;
    if (len >= 150) {
        this.value = this.value.substring(0, 150);
    }
    $('#charLeft').text(150 - len);
});

Так что проблема в том, что этот счетчик символов (и другие jQuery, такие как validation, datepicker) не работают внутри Fancybox.Они работают, если страница загружается без Fancybox или если она загружается через Fancybox как встроенная.

Я понимаю, что это довольно распространенный вопрос, но я попробовал все решения, но ни одно из них не помогло мне.

Я пытался

• использовать разные идентификаторы для страницы AJAX
• , размещая скрипт количества символов в конце страницы AJAX (он даже не показывался
• в Firebug)
• размещение скрипта счетчика символов как функции в пределах success
• других сумасшедших итераций

Проблема, похоже, связана с-инитирование функций jQuery после загрузки страницы ajax, поскольку при загрузке родительской страницы этих элементов не было.

Есть предложения?

Answer 1

Вам нужно либо перепривязать свои обработчики событий, как только вы загрузили контент внутри модного бокса, либо использовать механизм привязки событий JQuery.live.Ваша проблема возникает из-за того, что ваши обработчики событий пытаются привязать к узлам DOM, которые еще не загружены, поэтому вам нужно либо использовать JQuery.live, который будет привязывать события к элементам, даже если они еще не загружены, ИЛИ использоватьфункция обратного вызова, когда ваш контент в fancybox загружен для привязки обработчиков событий.

$(document).ready(function() {
    $('#ext_det').live('keyup', function() {

        // code to execute on keyup for element with id #ext_det    

    });
});