Question

我正在使用Twitter Bootstrap popover进行一种警报确认，以删除特定的表行，并且似乎无法使弹出窗口中的按钮影响任何内容。我在弹出窗口外复制了确切的“取消”按钮，它工作正常。 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内容的bootstrap popover时，它实际上克隆了popover div中data-content内的内容。因此，这意味着在原始取消中注册的事件不适用于在弹出窗口中创建的新取消按钮，因为此data-content的内容只是属性值而不是DOM中的真实元素。因此，您可以使用事件委派将click事件绑定到文档（因为它位于根级别），以便将其委派给取消按钮。

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

<强> fiddle

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

更好的是：将popover内容分成不同的隐藏元素，而不是将整个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

真正的popover中关闭Bootstrap popover？

1 个答案: