Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   tooltip на подгружаемых елементах (https://javascript.ru/forum/jquery/47034-tooltip-na-podgruzhaemykh-elementakh.html)

Анатолий Саратовцев 06.05.2014 09:25
tooltip на подгружаемых елементах
 
Всем доброго времени суток :)
У меня такая задача возникла, если кто знает как это решить, помогите.
Вот в чем суть. Есть виджет tooltip ( http://jqueryui.com/tooltip/ ), но он не срабатывает на елементах, которые были подгружены скриптами уже после основной загрузки страницы.
Делал так:
Код:
$(document).on('hover','.tooltip',function(){
    $('.tooltip').tooltip();
});
и так:
Код:
$(document).on('hover','.tooltip',function(){
    $(this).tooltip();
});
но это конечно неправильно и неработает естественно, просто другого ничего не могу придумать, возможно нужно редактировать код этого виджета, но я туда глянул и тоже не смог разобраться.

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

krasovsky 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 );//вставляем в боди(или куда хочешь)
}
})

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

BETEPAH 06.05.2014 11:53
Цитата:
Сообщение от Анатолий Саратовцев
что сути конечно не меняет
меняет. Вы навешиваете тултип заново даже на те элементы, на которых он уже навешен. Тут зависит от реализации плагина - возможны глюки с двойной инициализацией. А код krasovsky в этом плане более безопасный

nice_try 06.05.2014 12:10
Цитата:
Сообщение от krasovsky (Сообщение 310567)
Код виджета тут ни при чем. После загрузки новых элементов нужно навесить на них тултип:
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 );//вставляем в боди(или куда хочешь)
}
})
слушайте, а данный обработчик сработает? ведь элементов еще нет в документе

рони 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>

Анатолий Саратовцев 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 06.05.2014 14:00
Тебе тултип нужно вешать именно туда куда нужно а не на контейнер в котором лежат имги.
Попробуй так
var newdata = $(data);// вот вся дата
newdata.find('.tooltip').tooltip();// ищем в ней нужные элементы (имг) и ставим тултип
$('body').append(newdata);

Анатолий Саратовцев 06.05.2014 14:20
Во, теперь точное попадание, сделал, все работает. Большое спасибо, KRASOVSKY :thanks:

krasovsky 06.05.2014 14:32
Позязя


Часовой пояс GMT +3, время: 14:16.