在实际弹出窗口中关闭 Bootstrap 弹出窗口？

Question

我正在使用 Twitter Bootstrap 弹出框来进行一种用于删除特定表行的警报确认，并且似乎无法让弹出框内的按钮影响任何内容。我已经在弹出框外复制了确切的“取消”按钮，它工作正常。 http://jsfiddle.net/UK7BE/1/

HTML

<span class="glyphicon glyphicon-trash icon-set delLtBlue delPop" title='Delete' 
          data-content="
            <div style='font-size: 14px; color: #000000; font-weight:bold'>
              <span class='icon-warning-2'></span>&nbsp;Are you sure you want to delete the selected row?<br/><br/>
            </div>  
            <input type='button' value='Cancel' class='greenBtn cancelPop' />&nbsp;<input type='button' value='Delete' class='greenBtn' id='delete' />
          " title="Delete"></span>&nbsp;

jQuery

$('.delPop').popover({
              placement:'bottom',
              html : true,
          });
          $("input[type=button].cancelPop").on('click',function(){
            $(".delPop").popover('hide');
          });

有什么想法吗？提前致谢。

Answer 1

问题是，当您使用带有 html 内容的引导弹出框时，它实际上会克隆弹出框 div 内 data-content 中的内容。所以这意味着原始取消注册的事件不适用于弹出窗口中创建的新取消按钮，因为这个data-content的内容只是属性值而不是DOM中的真实元素。因此，您可以使用事件委托将点击事件绑定到文档（因为它位于根级别）以委托取消按钮。

$(document).on('click',"input[type=button].cancelPop", function () {
    $(".delPop").popover('hide');
});

fiddle

但是坚持住。您不需要以这种方式放置弹出框内容。您可以将 html 原样放置在隐藏它们的页面上。

更好的是：将弹出框内容分离到不同的隐藏元素中，而不是将整个 html 放在一个属性中。

<span class="glyphicon glyphicon-trash icon-set delLtBlue delPop" title='Delete'></span> &nbsp;
<div class="popOverContent">
    <div style='font-size: 14px; color: #000000; font-weight:bold'>
<span class='icon-warning-2'></span>&nbsp;Are you sure you want to delete the selected row?
        <br/>
        <br/>
    </div>
    <input type='button' value='Cancel' class='greenBtn cancelPop' />&nbsp;
    <input type='button' value='Delete' class='greenBtn' id='delete' />
</div>

并申请：

$(function () {
     $(document).on('click', "input[type=button].cancelPop", function () {
        $(".delPop").popover('hide');
    });

    $('.delPop').popover({
        placement: 'bottom',
        html: true,
        content: function () {
            return $('.popOverContent').html();
        }
    });

});

Fiddle