Очистка элементов DOM с помощью jQuery, затем воссоздание и повторное связывание различных функций

У меня действительно запутанное время, которое потратило впустую часы сегодня!

Я уже писал об этом: привязка мультифайла jquery к динамически загружаемой форме

Что объясняет часть 1 моей проблемы.

У меня сейчас такая же проблема с jquery.forms

Итак, чтобы расширить то, что я делаю:

Я загружаю форму в DIV с jquery.load DIV добавляется к телу и отображается как модальное окно с jQuery. Как только элементы добавлены в DOM, я звоню

$('#imgSelect').MultiFile();

и $('.reportIt').ajaxForm(параметры);

Эти две строки добавляют $.MultiFile() а также $.ajaxForm (jquery.forms) на соответствующие элементы, ссылки:

http://malsup.com/jquery/form/

http://www.fyneworks.com/jquery/multiple-file-upload/

Это работает отлично, и все функции, как ожидалось... ЗА ИСКЛЮЧЕНИЕМ...

Если пользователь нажимает кнопку закрытия в модальном окне, а затем снова открывает окно, не выполняя новую загрузку страницы, оно разрывается.

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

function closeModal(ele) {
    if ($(ele).hasClass('noClose')) {
        alert("Please wait... we're working on something.");
    } else {
        $(ele).fadeOut(function () { 
            $(this).remove();
        });
    };
};

Так что это очень просто затухает модальное div элемент, а затем полностью удаляет его из DOM.

Согласно этому: http://www.w3schools.com/jquery/html_remove.asp

$().remove() Метод полностью удаляет все элементы в родительском контейнере из DOM

Этот метод также удаляет данные и события выбранных элементов.

Итак, насколько я понимаю, это ДОЛЖНО означать, что в отношении jQuery и соответствующих плагинов каждый раз, когда моё модальное окно создается и записывается в DOM, это совершенно НОВЫЙ набор элементов, поэтому привязка .MultiFile() а также .ajaxForm() должен работать точно так же, независимо от того, был ли он показан ранее или нет

За исключением того, что это не работает во второй раз! (Входные данные нескольких файлов ведут себя как отдельные входы, и отправленные формы работают встраиваемо, а НЕ как AJAX-отправка, как требуется)

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

Небольшое дальнейшее исследование показывает, что эта ошибка возникает на этих линиях в jquery.MultiFile скрипт плагина:

$.fn[method] = function () {
    $.fn.MultiFile.disableEmpty();
         value = $.fn.MultiFile.intercepted[method].apply(this, arguments);              
          setTimeout(function () { $.fn.MultiFile.reEnableEmpty() }, 1000);
          return value;
}; // interception

Это около 453 строки для тех, кто знаком с этим плагином.

Глядя на то, что делает плагин, я подумал, что это связано с элементами с добавленным классом MultiFile-intercepted но, наблюдая за манипуляциями с DOM через консоль Chrome, я просто не вижу никакой разницы в поведении между первым и вторым запуском этих функций, поэтому не могу понять, в чем проблема.

Может кто-нибудь дать совет, почему эти функции не будут работать со второй попытки?

  • Я что-то упускаю в использовании jquery.remove()
  • Есть ли remove() функционировать в одном или обоих из плагинов, которые я использую, которые я пропускаю (я прочитал документы)

РЕДАКТИРОВАТЬ: так как это в процессе работы, есть рабочий пример здесь:

http://www.guitartrak.com/

Если вы заполните форму "Зарегистрировать элемент", используя категорию> электрогитары, бренд> Gibson, а затем добавили все, что хотите, в другие элементы, а затем нажмите "ПРОДОЛЖИТЬ", попробуйте добавить несколько файлов в выборку изображений, это должно сработать в первую очередь. время. Теперь не нажимайте "Сохранить и опубликовать", а нажмите большую "X", а затем повторите весь процесс снова без обновления страницы... вы увидите проблему, когда попытаетесь снова добавить изображения.

0 ответов

Другие вопросы по тегам