想要在禁用后启用popover bootstrap

时间:2013-11-29 10:14:08

标签: twitter-bootstrap popover javascript

我在自定义jquery代码中使用了popover bootstrap,我希望在.popover('enable')

后激活它[如popover('disable')]

我的代码是这样的:

$('#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');
    }                                               
});

2 个答案:

答案 0 :(得分: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();
            }
        });

答案 1 :(得分:0)

我通过将disabled元素包装在div中然后将popover代码放在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>