Question

我正在尝试使用bootstrap popover创建一个小字体 - awesone图标选择器。这是Popover内容的HTML结构。

<div class="popover-content">
    <div class="icon-container form-group">
        <div class="icons">
            <button data-icon="fa-500px" class="icon input-group"><i class="fa fa-500px"></i></button>
            <button data-icon="fa-adjust" class="icon input-group"><i class="fa fa-adjust"></i></button>
            <button data-icon="fa-adn" class="icon input-group"><i class="fa fa-adn"></i></button>
            <button data-icon="fa-align-center" class="icon input-group"><i class="fa fa-align-center"></i></button>
            <button data-icon="fa-align-justify" class="icon input-group"><i class="fa fa-align-justify"></i></button>
            <button data-icon="fa-amazon" class="icon input-group"><i class="fa fa-amazon"></i></button>
            <button data-icon="fa-ambulance" class="icon input-group"><i class="fa fa-ambulance"></i></button>
        </div>
    </div>
</div>

而且，这是jQuery ..

$('.icons-wrapper').on('shown.bs.popover', function () {
    $('button.icon').on( 'click', function() {
        var selectedIcon = $(this).data('icon');
        console.log( 'The selected icon is: '+ selectedIcon);
    });
});

我收到错误消息..

ReferenceError: selectedIcon is not defined

即使我绑定文档上的点击，错误仍然存在。

$(document).on('click', 'button.icon', function () {
    var selectedIcon = $(this).data('icon');
    console.log( 'The selected icon is: '+ selectedIcon );
});

我做错了什么？

如何从Bootstrap Popover获取按钮数据属性值

0 个答案: