Лучшая практика для запуска событий на странице вызова со страницы ajax

Question

У меня есть страница со списком файлов. К этой странице можно получить доступ напрямую через URL или загрузить ее в модальном диалоговом окне через ajax с другой страницы.

Если страница файлов загружается через ajax, я хотел бы разрешить пользователю щелкнуть имя файла и вызвать действие на странице, которая загрузила страницу файлов. Например, есть страница редактирования статьи. Эта страница содержит кнопку «прикрепить файл». Когда пользователь нажимает кнопку, страница файлов загружается в модальном диалоговом окне, а при щелчке имени файла идентификатор файла вставляется в форму статьи, и диалоговое окно закрывается. Однако есть также страница редактирования события с аналогичной кнопкой, но я бы хотел по-другому обработать событие щелчка по имени файла на этой странице.

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

Я использую jquery, если это каким-то образом облегчает задачу.

Answer 1

Вместо того, чтобы полагаться на глобальную функцию-обработчик в качестве интерфейса между страницами, вы можете вместо этого полагаться на пользовательские события:

"вызывающая страница":

$(document).bind("fileClicked", function(event, fileName) {
    alert(fileName);
});

"страница загружена через ajax":

$(".file").click(function() {
    $(document).trigger("fileClicked", [$(this).text()]);
});

Answer 2

Вы должны посмотреть на jQuery Live

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

Когда страница Ajax загружена, она не обрабатывается DOM так же, как загружалась главная страница, поэтому использование live прикрепит событие ко всем текущим источникам событий, а также к будущим, таким как динамическое содержимое Ajax

В вашей модели Ajax

<div>
    ...
    <a href="#" id="ajax_click_event">Add to main page</a>
    ...
</div>

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

$("#ajax_click_event").live('click',function(){
    //Work wit the value of the form within the ajax div.
})