JQuery FancyBox не работает после изменения DOM

Question

Мы используем Fancybox , чтобы обеспечить лайтбокс для нашей галереи изображений.

У нас есть ul с классом 'images'.Каждый элемент списка содержит тег привязки и изображение внутри него.Якорный тег содержит ссылку на полноразмерное изображение.

Этот код используется для настройки лайтбокса.

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function () {
        if (!themeJSEnabled) {
            $(".images a").fancybox({
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'titlePosition': 'inside',
                'autoScale': true,
                'centerOnScroll': true,
                'overlayOpacity': .95,
                'titleFromAlt': true,
                'scrolling': 'no'
            });
        }
    });
//]]>
</script>

Это прекрасно работает для большинства наших частных ярлыков, но один конкретныйстиль не работает.

Стиль, который не работает, использует javascript, чтобы разорвать часть DOM и восстановить ее (как показано ниже)

 $("#subcontent2").before("<div class='combinedContentWrapper'></div>");
 $("div.combinedContentWrapper").append("<div class='combinedContent'></div>");
 $("div.combinedContent").append("<div class='sc1'></div>");
 $("div.combinedContent").append("<div class='mc'></div>");
 $("div.mc").append($(".maincontent").html());
 $("div.sc1").append($(".subcontent1").html());
 $("div.maincontent").remove();
 $("div.subcontent1").remove();
 $("div.mc").addClass("maincontent");
 $("div.sc1").addClass("subcontent1");

В темах этого стиля themeJSEnabled(из первого блока кода) верно, поэтому ПОСЛЕ того, как DOM реконструируется с помощью приведенного выше кода, я использую следующий код для регистрации Fancybox:

 $(".images a").fancybox({
      'transitionIn': 'elastic',
      'transitionOut': 'elastic',
      'titlePosition': 'inside',
      'autoScale': true,
      'centerOnScroll': true,
      'overlayOpacity': .95,
      'titleFromAlt': true,
      'scrolling': 'no'
  });

Насколько я понимаю, это должно работать, так какЯ ничего не регистрировал до реконструкции DOM, и fancybox должен регистрироваться на новых элементах.

Однако, когда я впервые щелкаю любое изображение в списке, он выдает ошибку javascript - этоне определено.Эта ошибка указана как строка 17 в рамках совершенно не связанного метода.Ошибка по-прежнему возникает, даже если этот метод окружен блоком try / catch.Ошибка НЕ ​​возникает при последующих щелчках на изображениях, что приводит к отсутствию результата.

Что я могу сделать, чтобы заставить Fancybox работать в этой ситуации?

Пример вы можете увидеть на нашем сайте.тестовый сервер на по этой ссылке .Нажмите «Изображения», затем щелкните изображение.

Answer 1

Хорошо, мы в конце концов нашли причину.

Когда мы модифицируем DOM, кажется, теряются ссылки на javascript fancybox.

Это было исправлено путем перемещения ссылок fancybox на голову следующим образом:

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager.RegisterClientScriptInclude(this.Page, GetType(), "fancybox1", "scripts/FancyBox/jquery.fancybox-1.3.4.pack.js");
    ScriptManager.RegisterClientScriptInclude(this.Page, GetType(), "fancybox2", "scripts/FancyBox/jquery.mousewheel-3.0.4.pack.js");
    Page.Header.Controls.Add(new LiteralControl("<link rel=\"stylesheet\" type=\"text/css\" href=\"scripts/FancyBox/jquery.fancybox-1.3.4.css\" />"));
}

Как только мы это сделали, у нас это заработало.