1

我正在使用 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');
          });

有任何想法吗？提前致谢。

4

1 回答 1

2

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

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

小提琴

但是坚持住。您不需要以这种方式放置弹出框内容。您可以将 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();
        }
    });

});

小提琴

于 2013-10-02T18:04:45.957 回答