Динамическая загрузка jQuery qTip-кода - PullRequest
Новая
       9

Динамическая загрузка jQuery qTip-кода

2 голосов
/ 11 августа 2010

Для приложения, которое я пишу, мне необходимо динамически загружать контент в DIV при отправке формы.

Для этого динамически загружаемого контента требуется несколько всплывающих подсказок, которые будут автоматически отображаться во время загрузки (нет необходимости в событии, чтобы вызвать его).Я выбрал qTip, потому что у него есть параметры для этого, в отличие от большинства других подсказок, которые я обнаружил, для которых требуется событие для запуска всплывающей подсказки (например, onmouseover).

Это код qTip, используемый для достижения этой цели: 

$(function(){
    $('#someelement').qtip({
        content: 'This is the message!',
        show: { ready: true, when: false },
        hide: { false },
        position: {
            corner: {
                target: 'topLeft',
                tooltip: 'bottomRight'
            }
        },
        style: {
                        ............ styling code here................
            }
        }
    })
});

Это прекрасно работает в любой форме или форме, в которой я ее пробую.Подсказка успешно появляется.

Однако всплывающая подсказка не появляется, если я динамически загружаю этот код вместе с содержимым.

Содержимое загружается с использованием великолепных форм Malsup и плагинов таконита.

Любые идеи будут высоко оценены!

Конечно, если вы знаете другой метод или плагин, который я мог бы использовать для достижения того же подобного эффекта, не стесняйтесь его предлагать.:)

1 Ответ

2 голосов
/ 11 августа 2010

У меня была эта проблема раньше, и вот как я ее решил. Поместите код плагина в отдельную функцию и вызовите его в готовом документе: 

$(function(){
    loadQtip();
});

function loadQtip() {
    $('#someelement').qtip({
        content: 'This is the message!',
        show: { ready: true, when: false },
        hide: { false },
        position: {
            corner: {
                target: 'topLeft',
                tooltip: 'bottomRight'
            }
        },
        style: {
                        ............ styling code here................
            }
        }
    })
}

Затем, когда вы добавляете новые данные, снова вызывайте функцию: 

...
complete: function() {
    loadQtip();
}

Для таких событий, как щелчок, изменение и т. Д., Вы найдете метод .live(), который работает, но когда вы устанавливаете плагин для элемента, этот метод не сохраняется.

...