简体   繁体   中英

want to enable popover bootstrap after disabled it

I used popover bootstrap in my custom jquery code and i want to activate it [like .popover('enable') ] after popover('disable')

my code like this:

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

I have found a workaround to achieve this.

To disable it:

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

And to enable, just initialize it again with 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();
            }
        });

I solved this for my app by wrapping the disabled element in a div and then putting the popover code on the div itself. Here's a sample from a Rails app:

<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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM