Показать / скрыть ол, созданный плагином - PullRequest
Новая
       20

Показать / скрыть ол, созданный плагином

0 голосов
/ 05 марта 2012

Я использую плагин soundcloud и по умолчанию он отображает треклист. Мне нужно использовать кнопку, чтобы переключать видимость этого списка, поэтому я отредактировал код .js, и теперь он добавляет кнопку с классом "tplaylist" рядом с треклистом. По какой-то причине я не могу ни скрыть список, ни сделать его снова видимым. С помощью CSS я могу установить отображение: нет; и это исчезает, но я не могу показать это снова. Мой код: 

$(".sc-player ol.sc-trackslist").css('display', 'none');
$(".sc-player ol.sc-trackslist").css('display', 'block');

$(".tplaylist").click(function(){
  $(".sc-player ol.sc-trackslist").toggle();
});

Этот код по какой-то причине не влияет на треклист. Если я удалю из таблицы стилей отображение: нет; список виден, и то, что написано здесь в JQuery, не скрывает его вообще. Я также попробовал чистое решение CSS, и оно тоже не работает.

Спасибо за вашу помощь!

Ответы [ 3 ]

0 голосов
/ 05 марта 2012

Эти элементы создаются после вашего кода, поэтому событие не было прикреплено к элементам.

У вас есть два варианта:

  1. напишите свой код после того, где написан код плагина.
  2. используйте делегатское событие, например on или delegate.

on версия: 

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

$('#container').on('click', '.tplaylist',function(){
    $('.sc-player ol.sc-trackslist').toggle();
});

on полезно документы :

Обработчики событий привязываются только к выбранным в данный момент элементам; Oни должен существовать на странице в тот момент, когда ваш код вызывает .on (). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните событие привязка внутри обработчика готовых документов для элементов, которые находятся в HTML-разметка на странице. Если новый HTML вводится на страницу, выберите элементы и прикрепите обработчики событий после того, как новый HTML размещены на странице. Или используйте делегированные события, чтобы прикрепить событие обработчик, как описано далее.

Делегированные события имеют то преимущество, что они могут обрабатывать события из потомки элементы, которые будут добавлены в документ позднее. By выбрать элемент, который гарантированно будет присутствовать во время делегированный обработчик событий прикреплен, вы можете использовать делегированные события для Избегайте необходимости часто подключать и удалять обработчики событий. это элемент может быть контейнерным элементом представления в Дизайн Model-View-Controller, например, или документ, если событие Обработчик хочет отслеживать все всплывающие события в документе. элемент документа доступен в заголовке документа до загружая любой другой HTML-код, поэтому безопасно прикреплять туда события без в ожидании готовности документа.

0 голосов
/ 05 марта 2012

Ты делаешь это слишком сложно. Просто используйте переключатель: 

$('.tplaylist').click(function () {
    $('.sc-player ol.sc-trackslist').toggle();
});

Вам не нужны «display: none» и «display: block», так как jQuery сделает это за вас.

0 голосов
/ 05 марта 2012

использование delegate

$(document).delegate("click",".tplaylist",function(){
$(".sc-player ol.sc-trackslist").toggle();
});

вероятная причина в том, что плагин создает элемент на лету, то есть он вставляется позже в DOM, и обработчик события click не будет привязываться к нему, так что вы можете использовать делегирование события для document или более высокого уровня. элемент в иерархии.

...