Постоянное отображение (скрыть / показать) для динамически создаваемых элементов DOM? - PullRequest
Новая
       5

Постоянное отображение (скрыть / показать) для динамически создаваемых элементов DOM?

3 голосов
/ 27 октября 2009

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

 .spec { display:none; }

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

// Basic jQuery show/hide
if (btn.checked)
    $('.spec').show();
else
    $('.spec').hide();

Поскольку в моем случае это один и тот же модуль JS, я всегда мог просто повторно выполнить этот код после добавления в DOM. Но в целом это может быть не так, поэтому мой вопрос:

Как обычно jQuery решает эту проблему?

Поскольку функции jQuery show / hide изменяют element.style, а не сам объект стиля, в итоге я написал плагин jQuery, который изменяет таблица стилей, которая отлично работает, но кажется слишком убитой, поэтому вопрос. 

var nval = btn.checked ? '' : 'none';
$.styleSheet('.spec', 'display', nval );

Ответы [ 5 ]

3 голосов
/ 27 октября 2009

Вы должны добавить класс к <body> (или к другому родительскому элементу) для этой цели, а затем переключить этот класс с помощью jQuery.

CSS: 

body.spec_is_hidden .spec {
  display: none;
}

JS: 

if (btn.checked)
    $('body').addClass('spec_is_hidden');
else
    $('body').removeClass('spec_is_hidden');
0 голосов
/ 27 октября 2009

Вы придумали два хороших решения и сбили их обоих:)

Если вы ищете простое решение, повторный запуск $(".spec").show() кажется лучшим.

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

0 голосов
/ 27 октября 2009

Я знаю 2 решения: 1) Используйте live для элемента, который еще не существует, например: `$ ('a .special'). Live (" click ", function () {...});

2) Используйте функцию callback из load. Например: $('p .special').load('x.html', {}, function(){ //search for new element and bind them new function. ...

ИМХО секунда лучше;)

0 голосов
/ 27 октября 2009

Похоже, что вы тестируете, установлен ли или не отмечен btn при загрузке документа. Вместо этого (или в дополнение к этому) добавьте обработчик событий, который запускается всякий раз, когда пользователь взаимодействует с флажком. Обработчик change - это тот, который вам нужен. Это всегда будет использовать текущее состояние DOM, и поэтому оно будет включать все новые добавленные элементы: 

$(btn).change(function(){
  $('.spec').toggle();
});

Для простоты я использовал обработчик toggle, чтобы изменить display:hidden на display:block / inline или наоборот. Если вы хотите быть явным, вы можете сделать это: 

$(btn).change(function(){
  $('.spec')[$(this).val() ? 'show' : 'hide']();
});
0 голосов
/ 27 октября 2009

Возможно, изменение класса элементов будет лучше. Затем, когда вы добавляете элементы в DOM, вы можете назначить им соответствующий класс для состояния, в котором находится страница.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...