Плагин qTip jQuery не всегда срабатывает

Я использую плагин jquery qTip плагин qTip для веб-сайта, над которым я работаю, на основе другого потока Я поднял здесь: поток переполнения стека

Мой вопрос: у меня есть панель навигации, расположенная в верхней части экрана, которая в основном устанавливает атрибут заголовка на основе меню вкладок, в котором вы находитесь, все они хранятся в массиве javascript.

Например, у меня есть три пункта меню в верхней части экрана, скажем, меню A, меню B и меню C.

У меня также есть информационное изображение, расположенное в крайнем правом положении панели навигации, для которого я установил атрибут заголовка на основе параметра «Меню», выбранного на панели навигации.

Например:

Menu A => myRole[0] = "Admin"
Menu B => myRole[1] = "Manager"
Menu C => myRole[2] = "Guest"

Таким образом, когда пользователь щелкает каждое из меню на панели навигации, я устанавливаю для атрибута заголовка информационного изображения значение «Администратор», «Менеджер» или «Гость».

При запуске плагин qTip работает и отображает «Администратор», когда я навожу на него курсор, но когда я меняю меню на Меню C, он по-прежнему отображает «Администратор» вместо «Гость».

Судя по всему, он не вызывает плагин qTip, который я поместил в нижний колонтитул экрана (см. фактический код ниже).

Любые идеи, как гарантировать, что qTip срабатывает каждый раз, когда я нажимаю/меняю параметры меню и значение пикапов в массиве javascript?

<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>



<script type="text/javascript"> 
$(document).ready(function()
{
   $('div#infoi img[title]').qtip({
      position: { 
         adjust: { x:-110, y:0 },
         corner: {
            target: 'bottomLeft',
            tooltip: 'topMiddle'
         }
      },
      style: {
        width: 250,
        padding: 5,
        background: '#E7F1FA',
        color: 'black',
        textAlign: 'center',
        border: {
          width: 3,
          color: '#65a9d7'
        },
        tip: 'topRight'
      }
   });
});
</script>

Спасибо.


jquery jquery-plugins qtip
person tonyf    schedule 03.06.2010    source источник
comment
$('div#infoi img[title]') это опечатка?   -  person Bryan Downing    schedule 03.06.2010
comment
к сожалению нет. использование информации является правильным.   -  person tonyf    schedule 03.06.2010

Ответы (1)


arrow_upward
0
arrow_downward

Если ваше меню изначально присутствует на странице, а затем вы добавляете другие элементы позже или заменяете элементы позже, вам необходимо повторно инициализировать всплывающую подсказку для этих элементов.

As you mentioned it appears you are only changing text of the side part based on selection. You need to change both title and then reinitialise the qtip function so i suggest you place all of your code in a function like 

var qtipset = function(){
      $('div#infoi img[title]').qtip({
      position: { 
         adjust: { x:-110, y:0 },
         corner: {
            target: 'bottomLeft',
            tooltip: 'topMiddle'
         }
      },
      style: {
        width: 250,
        padding: 5,
        background: '#E7F1FA',
        color: 'black',
        textAlign: 'center',
        border: {
          width: 3,
          color: '#65a9d7'
        },
        tip: 'topRight'
      }
   });
     }

В вашем Javascript, где вы обновляете заголовок своего изображения с выбранным текстом меню сразу после изменения атрибута заголовка на изображении, также вызовите эту функцию, например qtipset();, которая затем перечитает заголовок и инициализирует элементы qtip на странице, поэтому в следующий раз, когда вы наведете курсор, он сможет для вызова функции qtip с правильными данными.

person Farrukh Subhani    schedule 18.09.2013