Проблема с qTip и динамически добавляемыми элементами

У меня есть страница с UpdatePanel, где я добавляю некоторые формы при нажатии на страницу.
В этих новых добавленных элементах у меня есть изображения, которые должны использовать qTip.

У меня есть это:

$(document).ready(function () {    
        $('.ttip').qtip({
            content: $(this).attr('tooltip'),
            show: 'click',
            hide: 'click',
            position: {
                my: 'top right',
                at: 'bottom center'
            },
            style: { classes: 'ui-tooltip-light' }
        });
    });

И это работает с элементами, которые видны в начале.
Все элементы, которые используют qTip, имеют атрибут runat="server".
НО, когда я добавляю новый элемент с классом ttip, это не работает.

Исследуя, я вижу, что элементы, которые видны в начале, имеют атрибут:

data-hasqtip="6"

Но динамически добавляемые элементы не имеют этого атрибута.

Как я могу обойти это?
Как заставить это работать?

ОБНОВЛЕНИЕ НА ОСНОВЕ ОТВЕТА

Я добавил это в код позади, где я делаю элемент видимым:

// Button click handler that add new element to page
public void AddNewElement(Image image)
{
    image.Visible = true;
    image.ToolTip = "blah";
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
                        "tmp",
                        @"<script type='text/javascript'>
                            $('.ttip').filter(function(){return !$(this).data('qtip')}).qtip(
                                content: $(this).attr('tooltip'),
                                show: 'click',
                                hide: 'click',
                                position: {
                                    my: 'top right',
                                    at: 'bottom center'
                                },
                                style: { classes: 'ui-tooltip-light' }
                            );
                        </script>", 
                        false);
}

Но все равно не работает :(


person 1110    schedule 26.11.2013    source источник
comment
Вам нужно $('.ttip').qtip({.. после динамического добавления элементов.   -  person Johan    schedule 26.11.2013


Ответы (1)


После того, как вы добавили новые элементы, повторно инициализируйте плагин qTip:

$('.ttip').filter(function(){return !$(this).data('qtip')}).qtip(...);
person A. Wolff    schedule 26.11.2013
comment
+1, но не лучше ли было бы .qtip() вне обратного вызова? Это применит .qtip() ко всем элементам, независимо от data, верно? - person Johan; 26.11.2013
comment
Извините за недостаток знаний, когда я нажимаю кнопку, чтобы добавить новый элемент, я использую myImage.Visible = true;myImage.ToolTip="some text", это в коде программной части С#. Как использовать этот пример, который вы предоставили? НУЖНО ЛИ мне изменить мою текущую функцию JS? - person 1110; 26.11.2013
comment
@Johan, вам нужно повторно инициализировать плагин для новых элементов. Проверка data() предназначена для того, чтобы избежать отзыва плагина для уже инициализированных элементов, которые для некоторых плагинов (не знаю для qTip, как обрабатывается этот случай) могут быть грязными. К вашему сведению, некоторые плагины в качестве всплывающей подсказки начальной загрузки уже получили свой собственный метод делегирования, похоже, это не относится к плагину qTip (только что проверил DOC, не вижу его) - person A. Wolff; 26.11.2013
comment
@1110 обработчик кликов, когда вы запрашиваете сервер для новых элементов - person A. Wolff; 26.11.2013
comment
Я знаю, каково ваше намерение с этим кодом. Как вы знаете, filter() перебирает все элементы и проверяет наличие data. Я думал, что вы qtip(): изменили каждый элемент внутри обратного вызова, но когда я смотрю на него сейчас, я заметил, что, должно быть, неправильно его понял. Так что ничего, мой плохой! - person Johan; 26.11.2013
comment
Я обновляю свой вопрос на основе вашего ответа, но похоже, что я все еще делаю что-то не так? - person 1110; 26.11.2013
comment
В консоли браузера я получаю Uncaught SyntaxError: Unexpected token : - person 1110; 26.11.2013
comment
@ 1110 Я говорил об обработчике кликов, коде, который вы используете для привязки события клика к кнопке для добавления новых элементов, а не коде, который вы используете для инициализации плагина qTip. Кстати, да, в вашем последнем опубликованном коде есть опечатка, отсутствует {} вокруг объекта данных - person A. Wolff; 26.11.2013
comment
Я немного обновляю код... этот код вызывается, когда я нажимаю кнопку. Я не могу найти ошибку вокруг объекта данных? - person 1110; 26.11.2013
comment
@ 1110 Я не могу найти ошибку вокруг объекта данных: .qtip({...}) не только .qtip(...) - person A. Wolff; 26.11.2013
comment
Спасибо с большой Т :) - person 1110; 26.11.2013