HTML

Question

尝试根据对弹出框中显示的选项所做的选择来使用自定义数据属性值。

在下面的示例中，我有一条消息“我是单身没有孩子”，点击单出现一个带有选项的弹出框（单身/已婚）。如果用户点击已结婚，那么我应该替换为我们已婚，没有孩子

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();
    }

});

Answer 1

尝试

            <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')
});

演示：Fiddle

Answer 2

您需要将click事件委托给popover内容，例如：

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

这是一个工作小提琴：http://jsfiddle.net/h7fVL/3/

Answer 3

它发生的是你将弹出窗口的html作为字符串并将其传递给Bootstrap。它后来创建了另一个div，它放置了这个内容。这有两个问题。您正在尝试在显示弹出窗口之前附加事件。而click事件的选择器实际上匹配为弹出窗口准备的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/

使用基于弹出框选择的自定义数据属性值 - 不起作用

HTML

CSS

JS

3 个答案: