Форум

Анатолий Саратовцев · #1 (**permalink**) 06.05.2014, 09:25

Всем доброго времени суток

У меня такая задача возникла, если кто знает как это решить, помогите.
Вот в чем суть. Есть виджет tooltip ( http://jqueryui.com/tooltip/ ), но он не срабатывает на елементах, которые были подгружены скриптами уже после основной загрузки страницы.
Делал так:

Код:

$(document).on('hover','.tooltip',function(){
    $('.tooltip').tooltip();
});

и так:

Код:

$(document).on('hover','.tooltip',function(){
    $(this).tooltip();
});

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

Вообщем одна надежда на вас

krasovsky · #2 (**permalink**) 06.05.2014, 10:01

Код виджета тут ни при чем. После загрузки новых элементов нужно навесить на них тултип:
html код:

<div>
<a href="/somepath1">link1></a>
<a href="/somepath2">link2></a>
</div>

ajax запрос

$.ajax({
url:'your url',
data : {key1:value1,key2:value2,.....},
success:function(data) {// коллбэк
//допустим тут пришел наш html
var newdata = $(data).find('a').tooltip(); //вешаем тултип
$('body').append(newdata );//вставляем в боди(или куда хочешь)
}
})

Анатолий Саратовцев · #3 (**permalink**) 06.05.2014, 10:34

Во, а ларчик просто открывался, спасибо большое.
Только я сделал так:
.....
success: function(data){
$('.tooltip').tooltip();
}
что сути конечно не меняет. Большое спасибо за помощь KRASOVSKY

BETEPAH · #4 (**permalink**) 06.05.2014, 11:53

Сообщение от Анатолий Саратовцев

что сути конечно не меняет

меняет. Вы навешиваете тултип заново даже на те элементы, на которых он уже навешен. Тут зависит от реализации плагина - возможны глюки с двойной инициализацией. А код krasovsky в этом плане более безопасный

nice_try · #5 (**permalink**) 06.05.2014, 12:10

Сообщение от krasovsky

Код виджета тут ни при чем. После загрузки новых элементов нужно навесить на них тултип:
html код:

<div>
<a href="/somepath1">link1></a>
<a href="/somepath2">link2></a>
</div>

ajax запрос

$.ajax({
url:'your url',
data : {key1:value1,key2:value2,.....},
success:function(data) {// коллбэк
//допустим тут пришел наш html
var newdata = $(data).find('a').tooltip(); //вешаем тултип
$('body').append(newdata );//вставляем в боди(или куда хочешь)
}
})

слушайте, а данный обработчик сработает? ведь элементов еще нет в документе

рони · #6 (**permalink**) 06.05.2014, 12:21

Сообщение от nice_try

слушайте, а данный обработчик сработает? ведь элементов еще нет в документе

да сработает

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>tooltip demo</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

</head>

<body>



<p>
  <textarea id="test" name="">
  <div>
<a href="/somepath1" title="help">link1></a>
<a href="/somepath2" title="help">link2></a>
</div>

  </textarea>
  <a href="#" title="Anchor description">Anchor text</a>



</p>

<script>
$('a').tooltip(); //  title="Anchor description">
var data = $('textarea').val()
var newdata = $(data).find('a').tooltip(); //вешаем тултип title="help"
$('body').append(newdata);//вставляем в боди(или куда хочешь)



</script>



</body>

</html>

Анатолий Саратовцев · #7 (**permalink**) 06.05.2014, 13:53

ВЕТЕРАН, спасибо что объяснили, теперь понятно, во-первых скрипту ненужно обходить опять весь документ, во-вторых не возникнут возможные проблемы с повторной инициализацией, ну короче понятно, нужно обработать только полученный кусок кода.
Еще хочу поделиться с одним нюансом, с которым я столкнулся.
Допустим аякс запрос возвращает данные в таком виде:

Код:

<li>
    <a href="ссылка">
        <img src="картинка" alt="Это всплывающая инфа" class="tooltip" />
    </a>
</li>

тогда код

Код:

var newdata = $(data).find('.tooltip').tooltip();

вернет только теги img.
Я сделал так:

Код:

var newdata = $(data).tooltip();

krasovsky · #8 (**permalink**) 06.05.2014, 14:00

Тебе тултип нужно вешать именно туда куда нужно а не на контейнер в котором лежат имги.
Попробуй так

var newdata = $(data);// вот вся дата
newdata.find('.tooltip').tooltip();// ищем в ней нужные элементы (имг) и ставим тултип
$('body').append(newdata);

Анатолий Саратовцев · #9 (**permalink**) 06.05.2014, 14:20

Во, теперь точное попадание, сделал, все работает. Большое спасибо, KRASOVSKY

krasovsky · #10 (**permalink**) 06.05.2014, 14:32

Позязя

Форум

Справочник

Discord чат

Курсы javascript