Классы, не поддерживаемые Bootstrap .popover

Я использую всплывающее окно Twitter Bootstrap для добавления меток.

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

Вот мой JS:

    var isVisible = false;
    var clickedAway = false;

    $('.btn-label-popover').popover({
            animation: true,
            placement: 'top',
            title: 'Selecteer labels',
            content: $('.controls .popover-content').html(),
            trigger: 'manual'
        }).click(function(e) {
            e.preventDefault();
            if(isVisible & clickedAway){
                $('.btn-label-popover').popover('hide');
                isVisible = clickedAway = false;
            } else {
                $(this).popover('show');
                clickedAway = false;
                isVisible = true;
            }
    });

    $('body').on('click', '.popover-content span', function(e){
        e.stopPropagation();
        var identifier = $(this).parent().attr('class');
        $('.'+identifier+' span').toggleClass('label-inverse');
        $('.'+identifier+' span').toggleClass('label-reminder');
    });

    $(document).click(function(e) {
      if(isVisible & clickedAway)
      {
        $('.btn-label-popover').popover('hide');
        isVisible = clickedAway = false;
      }
      else
      {
        clickedAway = true;
      }
    });

    $(document).keyup(function(e) {
        if (e.keyCode == 27) {
            if(isVisible & clickedAway)
            {
                $('.btn-label-popover').popover('hide');
                isVisible = clickedAway = false;
            } else {
                clickedAway = true;
            }
        }
    });

Есть ли способ получить HTML с добавленными классами? Большое спасибо!


class jquery twitter-bootstrap popover
person Chris Koster    schedule 07.12.2012    source источник
comment
youtube.com/watch?v=hQVTIJBZook   -  person mike clagg    schedule 04.06.2013

Ответы (1)


arrow_upward
2
arrow_downward

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

var identifiers = [];

$('.btn-label-popover').popover({
        // your options
    }).click(function(e) {
        e.preventDefault();
        if(isVisible & clickedAway){
            $('.btn-label-popover').popover('hide');
            isVisible = clickedAway = false;
        } else {
            $(this).popover('show');

            // Loop through changed popovers
            for(i=0; i<identifiers.length, i++){
                $('.'+identifiers[i]+' span').toggleClass('label-inverse');
                $('.'+identifier[i]+' span').toggleClass('label-reminder');
            }
            clickedAway = false;
            isVisible = true;
        }
});

$('body').on('click', '.popover-content span', function(e){
    e.stopPropagation();
    var identifier = $(this).parent().attr('class');

    // Add to an array
    identifiers.push(identifier);

    $('.'+identifier+' span').toggleClass('label-inverse');
    $('.'+identifier+' span').toggleClass('label-reminder');
});
person Steve O    schedule 07.12.2012
comment
Спасибо за ваш ответ, но это не так. Классы не удаляются при нажатии на тело. Переключается только при нажатии на саму метку, как и должно быть. Проблема в том, что когда я переключаю некоторые классы, я закрываю всплывающее окно. После этого при повторном открытии всплывающего окна все выбранные метки (классы) исчезают. - person Chris Koster; 07.12.2012
comment
Ах, извините, @ChrisKoster, я умолчал о том, что вы использовали on с селектором. Я посмотрю еще раз. - person Steve O; 07.12.2012
comment
Я добавил исправленное решение. - person Steve O; 07.12.2012
comment
Большое спасибо за помощь Стиву! Работает в настоящее время. Я думал, что всплывающее окно было просто показано и скрыто, потому что я не использовал уничтожение. Что ж, еще раз спасибо. - person Chris Koster; 07.12.2012