Использование пользовательского значения атрибута данных на основе выбора поповера - не работает

Question

Использование пользовательского значения атрибута данных на основе выбора поповера - не работает

0

'm пытается использовать значение атрибута пользовательских данных на основе выбора, сделанного в параметрах, отображаемых в popover.

Здесь, в приведенном ниже примере я имею сообщение для чтения "Я не замужем, без детей", где при нажатии кнопки Сингл поповер появляется с опцией (одиночный/замужем). Если пользователь нажимает на вас замуж, то меня следует заменить на " Мы ЗАМУЖЕМ" без детей

скрипка

HTML

<div>
        <span id="m-marital-status" data-single="I am" data-multiple= "We are">I am</span>
        <div class="section-input">
            <div class="popover-markup" id="marital-status"><a href="#" class="trigger">Single</a> with 
                <div class="head hide"></div>
                <div class="content hide">
                    <ul>
                      <li>married</li>
                      <li>single</li>
                    </ul>
                    <div class="footer hide">test</div>
                </div>
                <span>no Kids</span>.
            </div>
        </div>

CSS

.popover-title {
    padding: 0;
    border: 0;
}

JS

$('.popover-markup>.trigger').popover({
    html: true,
    placement: 'top',
    content: function () {
        return $(this).parent().find('.content').html();
    }

});

dragonfly 11 нояб. 2013, в 08:26

Источник

0

Попробуйте jsfiddle.net/arunpjohny/M2Gk6/1
Arun P Johny 11 нояб. 2013, в 07:34
0

как изменить «холост» на «женат» после выбора опции «женат» из списка?
dragonfly 11 нояб. 2013, в 08:02
0

см обновленный ответ ниже
Arun P Johny 11 нояб. 2013, в 08:12

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

Теги:

jquery

html5

css3

3 ответа

1

Вам нужно делегировать событие click для содержимого popover с чем-то вроде:

$('body').on("click", ".popover li", function() {
  // Code here
})

Здесь работает скрипка: http://jsfiddle.net/h7fVL/3/

David Link 11 нояб. 2013, в 06:09

0

как изменить «холост» на «женат» после выбора опции «женат» из списка?
dragonfly 11 нояб. 2013, в 07:58

0

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

trigger.popover({
    html: true,
    placement: 'top',
    content: function () {
        setTimeout(function() {
            $('.popover-content li').click(function() {
                closePopup();
                $('#m-marital-status').css('color','red');
            });
        }, 500);
        return $(this).parent().find('.content').html();        
    }    
});

http://jsfiddle.net/h7fVL/4/

Krasimir 11 нояб. 2013, в 06:13

Ещё вопросы

как изменить «холост» на «женат» после выбора опции «женат» из списка?

Arun P Johny · Accepted Answer · 2013-11-11T04-54-00.000Z

Пытаться

            <ul class="marital-status">
                <li data-status="We are">married</li>
                <li data-status="I am">single</li>
            </ul>

тогда

$(document).on('click', 'ul.marital-status li', function () {
    $('#m-marital-status').css('color', 'red').html($(this).data('status'));
    $('#marital-status .trigger').text($(this).text())
    $('.popover-markup>.trigger').popover('hide')
});

Демо: скрипка