Динамически вставить расширитель в jQuery Mobile

Question

Я довольно новичок в jQuery и в настоящее время отчаиваюсь, пытаясь вставить динамически создаваемый расширитель в страницу jQuery-Mobile, которая выглядит следующим образом:

<div data-role="page" id="myPage">
  <div data-role="content">
    <div id="myContainer"></div>
  </div>
</div>

Как расширитель должен быть вставлен в "myContainer ", я пишу:

var expander = $("<div data-role='collapsible' data-collapsed='true'><h3 class='category' /><div class='content' /></div>");
$("#myContainer").append(expander);
expander.find(".category").text(/*Some text*/);
expander.find(".content").text(/*Some text*/);

Однако в моем документе отображается только необработанный и неразборный элемент div.

Полагаю, мне придется вручную переключать создание экспандерапохоже на обновление списка - я не нашел ничего об этом в документации, однако.

К сожалению, ни

expander.Refresh();
//nor
expander.Expander();

, кажется, не существует.

Большое спасибо взаранее за ваши ответы!

Answer 1

Этот вопрос на самом деле повторяется так часто, что я создал FAQ по нему.

Вам необходимо использовать .page() на самом верхнем элементе, который вы добавляете в DOM.

Подробнее смотрите здесь: http://jquerymobiledictionary.dyndns.org/faq.html

[править]

Я также достиг того момента, когда я хотел использовать .page внутри события page*, и решение для меня было довольно очевидным - используйте семафор.

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