想要在禁用后启用popover bootstrap答案

【问题标题】：want to enable popover bootstrap after disabled it想要在禁用后启用popover bootstrap
【发布时间】：2013-11-29 10:14:08
【问题描述】：

我在我的自定义 jquery 代码中使用了 popover bootstrap，我想在 popover('disable') 之后激活它 [like .popover('enable')]

我的代码是这样的：

$('#edit-mode').on('click',function(){
    $(this).toggleClass('edit-on');

    if($(this).hasClass('edit-on')){
        $(this).css('color','#d9534f');
        //to disable link
        $('.alink').click(function(){
            return false;
        });
        //$('.alink').popover('enable');
        //popover a link
        $('.alink').popover({ 
            animation: true,
            html : true, 
            trigger: "click",
            placement: 'top',
            container: 'body',
            stayOnHover: true,
            selector: this,
            delay: {show: 100,hide: 100},
            content: function() {
                return $('#popover_content_wrapper').html();
            }
        });                         
    }
    else{
        $(this).css('color','#3276b1');
        //to enable link
        $('.alink').click(function(e){
            window.location.href = $(this).attr('href');
        });
        $('.alink').popover('hide');
        //disable popover
        $('.alink').popover('disable');
    }                                               
});

【问题讨论】：

标签： twitter-bootstrap popover javascript

【解决方案1】：

我找到了实现此目的的解决方法。

禁用它：

$(".popover").remove();   
$('.alink').popover('destroy');

要启用，只需使用popover() 再次初始化它：

$('.alink').popover({ 
            animation: true,
            html : true, 
            trigger: "click",
            placement: 'top',
            container: 'body',
            stayOnHover: true,
            selector: this,
            delay: {show: 100,hide: 100},
            content: function() {
                return $('#popover_content_wrapper').html();
            }
        });

【讨论】：

【解决方案2】：

我为我的应用解决了这个问题，方法是将禁用的元素包装在 div 中，然后将弹出框代码放在 div 本身上。这是 Rails 应用程序的示例：

<div rel="popover" class="popover-top" data-content="content goes here" data-title="title goes here" data-trigger="hover" data-original-title="" title="">
  <input class="line_item_quantity" disabled="disabled" id="order_line_items_attributes_0_quantity" min="0" name="order[line_items_attributes][0][quantity]" size="5" type="number" value="10">
</div>

【讨论】：