asp.net MVC - Как заставить работать jQuery после вызовов ajax

Question

Хорошо, мои ноги промокли от mvc. Я пытаюсь создать страницу типа профиля пользователя. Страница состоит из нескольких разделов, каждый из которых загружен с помощью частичного просмотра.

Я хочу иметь возможность редактировать каждый раздел отдельно в модальном диалоговом окне jQuery-UI. У меня все это работает должным образом (включая загрузку представлений Edit через ajax в модальный режим и отправку изменений.)

Моя проблема в том, что после любого вызова ajax мои диалоговые окна jQuery-UI перестают работать, поэтому я не могу закрыть или открыть диалоговое окно.

Конечно, я могу исправить такие вещи, как нажатие кнопок с помощью метода .live, но я не могу найти лучший способ заставить элементы jQuery-UI продолжать работать.

Как лучше всего это сделать? Думаю, я не совсем понимаю, что происходит с ранее загруженными плагинами jQuery после вызова ajax. Могу ли я ссылаться на элементы, загруженные в ajax-контент с моей главной страницы?

EDIT: Хорошо ... вот какой-то код, чтобы показать, что происходит ....

пользователь нажимает кнопку редактирования в разделе информации о пользователе

$('#editInfo').live("click", function () {
        dialogInit(450, 550, 'User Information');
        $('#dialog').dialog('open')
        $.ajax({
            type: 'GET',
            url: '../info/edit',
            data: {},
            success: function (response) {
                $('#dialog').html(response); //loads the partial edit view into the dialog div...works fine to here.

            }
        });
        return false;
    });

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

function infoUpdate(response) {
    dialogInit(450, 550, 'User Information');
    $('#dialog').dialog('close');
    $('#info').html(response);
}

Это загружает новое частичное представление информации о пользователе в соответствующий div на главной странице ... работает нормально ...

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

function dialogInit(height, width, title) {
    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        height: height,
        width: width,
        title: title
    });
}

РЕДАКТИРОВАТЬ 2:

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

Answer 1

Существует 3 возможных способа заставить динамически сгенерированный контент работать так, как ожидается:

1. Подключайте к нему обработчики событий после каждой регенерации (после AJAX или после любого другого изменения динамического содержимого).
2. .live
3. Оптимизировано .live - .delegate (событие будет фактически прикреплено к некоторому контейнеру, а не ко всему документу, как в .live)

UPD: Итак, вы правы, сам #dialog остается прежним. Но весь контент внутри него заменяется (новым HTML), поэтому элементы DOM (с прикрепленным обработчиком событий) для старых кнопок и т. Д. Не будут существовать после него.

Answer 2

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

После Ajax-вызовов все мои диалоговые окна казались неопределенными, и я получал множество $('example-dialog-box').dialog is not a function ошибок.

Я использую Kohana PHP MVC framework. После многих бесполезных поисков в Google, я решил запустить URL, набранный Ajax в моем браузере, чтобы увидеть, что он возвращает, и это эффективно решило мою проблему. Я понял, что ответ на вызов Ajax работал хорошо и имел все элементы, которые я хотел. Тем не менее, он также имел тег head и все теги link и script, что означало, что браузер запутался в новых jQuery включениях скрипта.

Я убедился, что ответ Ajax возвращает только то, что мне нужно, без дополнительных HTML и JavaScript, и это прекрасно сработало для меня. Я понимаю, что это может быть большой головной болью для кого-то в MVC фреймворке, поскольку несколько страниц обычно совместно используют HTML, и при кодировании метода, вызываемого Ajax, вы можете использовать уже существующее представление и добавить к нему желаемый ответ. В этом представлении уже могут быть теги заголовков, которые являются общими для большинства ваших страниц, и это приведет к очень странному поведению вашего браузера.