Как можно добиться поведения типа $ (document) .ready для содержимого AJAX?

Question

$(document).ready(handler) выполняется после полной загрузки DOM. Если содержимое позже добавляется на страницу с помощью AJAX, которая содержит функцию $(document).ready(handler), эта функция выполняется немедленно, в соответствии с jQuery API . Кроме того, .ready можно вызывать только для объекта jQuery, соответствующего текущему документу.

Это не то, что я хочу, однако:)

Как я могу достичь этого .ready типа функциональности для данных, загружаемых через AJAX после того, как .ready уже запущен, кросс-браузерно-совместимым способом?

EDIT: Вот очень упрощенный пример. У меня есть проблема, которую я пытаюсь решить, но мне больше интересно понять, как сделать это правильно.

По сути, функция .ready в ajaxPage.html срабатывает до полной загрузки важныйDependency.js, поэтому первая загрузка ajaxPage важныйDependency отсутствует, но последующие загрузки видят это.

index.html

...
<script type="text/javascript">
  $(document).ready(function() {
    alert("The document is ready");

    $('#myButton').click(function() {
      $('<div></div>').dialog({
        open: function () {
          $(this).load('ajaxPage.html');
        }
      });
    });
  });
</script>
...

ajaxPage.html

...
<script type="text/javascript" src="importantDependency.js"></script>
<script type="text/javascript">
  $(document).ready() {
    $('#thing').leverageImportantDependency();
  });
</script>
...

РЕДАКТИРОВАТЬ 2: Я хочу сделать это ИЗ загруженного контента, а не со страницы, вызывающей контент. Изменение вызывающей страницы означает дублирование кода в каждом экземпляре, где он вызывается. Мне бы хотелось, чтобы поведение было привязано к контенту, а не к странице, вызывающей его.

Answer 1

Как правило, вы захотите сделать что-то вроде этого:

$("#container").load(function(html) {
    // container has been filled up, and is 
    // ready for JS processing
    doSomethingWithNewContent();
});

То есть, запустить что-то один раз , содержимое было заменено, используя соответствующий обратный вызов ajax. Другие примеры включают в себя:

$.get("foo.html", function(html) {
    $("#container").html(html);
    $("#container").find(".foo").fancyThing();
});

$.ajax({ 
      url: 'foo.html',
      type: 'post',
      success: function(html) {
                   $("#container").html(html).find(".foo").hide();
               }
     });

См:

• http://api.jquery.com/jQuery.ajax/
• http://api.jquery.com/jQuery.post/
• http://api.jquery.com/jQuery.get/
• http://api.jquery.com/jQuery.load/

РЕДАКТИРОВАТЬ: Исходя из того, что я понимаю из вашего редактирования, вы хотите прикрепить что-то, например, обработчик событий или плагин к некоторым элементам, которые продолжают заменяться. Есть несколько способов сделать это:

1. В обратном вызове успеха, как продемонстрировано выше.
2. Использование .live или .delegate.
3. Использование .liveQuery.

Answer 2

Я не уверен, что получу ваш вопрос, но когда вы получили данные, вы просто делаете с ними все, что захотите, в обработчике успеха вызова ajax:

   $.ajax({
        url: pageUrl,
        success: function (data) {
            $(".someContainer").html(data);
            // TODO: This is your ready handler for the new content

        }
    });

Answer 3

Вы можете использовать полное свойство вызова JQuery Ajax. Полная функция вызывается после успеха или ошибки.

$.ajax({
  url: "foo",
  complete: function({
    // I'm done
  }
});

См .: http://api.jquery.com/jQuery.ajax/