JQuery - лучший способ поменять местами элементы интерфейса

Question

JQuery - лучший способ поменять местами элементы интерфейса

0

Какой лучший способ "сохранить" и "повторно отобразить" части html-страницы вместе с обработчиками событий jquery, которые вы настроили?

Более детально:

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

Когда они нажимают на переключатель A, большая часть пользовательского интерфейса должна отображаться с соответствующими элементами управления html (и обработчиками событий jquery), которые позволяют пользователю вводить параметры для вычисления A.

Аналогично, если пользователь нажимает на переключатель B, этот раздел страницы нуждается в том, чтобы показать все элементы управления (и связанные с ним обработчики событий jquery), которые позволяют пользователю вводить параметры для вычисления B.

Мой вопрос в том, как лучше всего обрабатывать замену элементов управления A и B html и связанных с ними обработчиков событий jquery?

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

(По сути, я думаю, что я хочу, чтобы иметь возможность сохранить кусок dom (который, надеюсь, включает обработчики событий jquery), но я не пишу тонны jquery, и я не уверен, как подойти к этому... Мне интересно, могу ли я получить весь раздел параметров страницы, представленной как узел jquery, и сохранить это off (переменной js) и восстановить ее, если необходимо, если это будет трюк??

Спасибо за любые идеи! Майкл

Michael Ray Lovett 12 май 2014, в 20:49

Источник

0

Использовать .clone ? Но вы уверены, что вам нужно сохранить точную копию или вы можете перезагрузить ее?
Dave Newton 12 май 2014, в 18:19
0

ну, как бы то ни было, я не планировал перезагружать (то есть через ajax) «раздел параметров» страницы с сервера каждый раз, когда пользователь переключается между типами вычислений. Вместо этого я надеялся снабдить свою страницу JS всем необходимым, то есть, когда пользователь впервые заходит на эту страницу), и два «куска html», представляющих каждое вычисление, будут храниться в переменных сценария java - чтобы быть « подключен к "странице, когда пользователь выбирает один calc или другой .. и надеется сохранить любые введенные пользователем значения и обработчики событий jquery, которые я бы настроил ..
Michael Ray Lovett 12 май 2014, в 18:24
0

Тогда я просто спрячу / покажу, как предполагает Мэтт, если только нет веской причины не делать этого.
Dave Newton 12 май 2014, в 18:29

Показать ещё 1 комментарий

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Использовать .clone ? Но вы уверены, что вам нужно сохранить точную копию или вы можете перезагрузить ее?
ну, как бы то ни было, я не планировал перезагружать (то есть через ajax) «раздел параметров» страницы с сервера каждый раз, когда пользователь переключается между типами вычислений. Вместо этого я надеялся снабдить свою страницу JS всем необходимым, то есть, когда пользователь впервые заходит на эту страницу), и два «куска html», представляющих каждое вычисление, будут храниться в переменных сценария java - чтобы быть « подключен к "странице, когда пользователь выбирает один calc или другой .. и надеется сохранить любые введенные пользователем значения и обработчики событий jquery, которые я бы настроил ..
Тогда я просто спрячу / покажу, как предполагает Мэтт, если только нет веской причины не делать этого.

Matt · Accepted Answer · 2014-05-12T16-40-00.000Z

Честно говоря, обычно проще просто hide()/show() элементы, а не удалять их/повторно добавлять.

Добавьте класс calculation-1 к элементам, которые вы хотите видеть для первого вычисления, и calculation-2 для вторых элементов расчета. Это позволит вам получить переменную jQuery для всех вычислений 1 и 2 элементов через $('.calculation-1') и $('.calculation-2).

Затем вы можете добавить обработчик событий для радио, которые hide() и show() элементы соответственно.

Если вы используете html(), вы потеряете события, связанные с дочерними элементами. Если вы не присоедините своих обработчиков к предку, который вы не удалите.

Вы также можете использовать detach(), который удалит элементы из DOM, но сохраните обработчики событий, которые вы добавили. Однако, если ваши элементы усеяны по всему DOM, трудно отслеживать их исходное положение, а TBH - больше усилий, чем того стоит.

Отделение может быть хорошим. В моем случае мои элементы управления параметрами не разбросаны по всему DOM. У меня есть один выделенный DIV, который будет выступать в качестве родителя для всех параметров. Когда выбрано радио A, содержимое этого div будет заполняться «деревом» элементов управления, представляющих calc A. Если выбрано радио B, то этот DIV будет заполнен деревом элементов управления для calc B.
@MichaelRayLovett: в этом случае да, detach() может работать; вам все равно придется сохранять элементы в переменной, чтобы восстановить их позже (как вы уже упоминали в своем вопросе). Я все еще рассмотрю hide() / show() хотя;).
Таким образом, в вашей идее о hide () / show (), страница изначально будет заполнена обоими наборами разделов параметров (например, каждый заключен в div), которые оба являются потомками некоторого родительского div .. и только один скрыт / показано одновременно?