2015-01-11 4 views
0

У меня есть элемент на странице следующим образом:Bootstrap popover не загружается?

<a data-ajaxload="/League/PointBreakdown/228583" href="#228583" class="point-breakdown" data-original-title="" title="">-</a> 

Я звоню поповер, как показано ниже, содержание Возвращается HTML и все работает нормально, получая небольшое количество HTML с сервера. На этой странице есть много ссылок, но у меня проблема: я не могу дважды щелкнуть одну и ту же ссылку. Я вижу, что popover вспыхивает и немедленно закрывается. Я хочу только один на странице в любой момент, то есть удалить его, когда другой открыт.

$('*[data-ajaxload]').bind('click', function() { 


     if ($(this).parent().children('.popover').length > 0) { 
      return; 
     } 

     ShowSpinner($(this).parents('table')); 

     try { 
      $('.popover').remove(); 

      var e = $(this); 

      $.get(e.data('ajaxload'), function (d) { 

       e.popover({ content: d, html: true }).popover('show'); 

       HideSpinner(); 
      }); 

     } 
     catch (ex) { 

      HideSpinner(); 
      $('.popover').remove(); 
     } 
    }); 
// pass in element to move the mask 
function ShowSpinner(elem) { 

    if (typeof (elem) != 'undefined' || elem != 'undefined') { 

     // move the mask 
     $('#mask').appendTo($(elem)); 
    } 

    $('#mask').show(); 

} 
function HideSpinner() { 

    $('#mask').appendTo($('body')); 
    $('#mask').hide(); 

} 

ответ

0

Просто я изменил код в поле ниже:

$('*[data-ajaxload]').on('mouseenter', function() { 
     $('.popover').remove(); 

     var link = $(this).attr('data-ajaxload'); 
     var content = ""; 
     $.ajax({ 
      cache: true, 
      type: 'post', 
      async: false, 
      url: link, 
      success: function (result) { 

       content = result; 
      } 

     }); // end ajax 

     $(this).popover(
      { 
       html: true, 
       content: content 
      }).popover('show'); 

    });