Обращение к DOM после ajax
Привет.
let div = document.getElementById('about-result'); $.post('',function(data){ for (key in data) { $(div).html(data[key].content); } } console.log(div.innerHTML) // Пустая строка Хотя там,в innerHTML всё на месте и контент на странице есть. Что не так? |
Цитата:
|
Логично. Я вынес это дело из запроса, вот почему. В $(div).html(data[key].content); я ищу ссылки на картинки. Их там несколько. Хочу, что бы они открывались в colorbox. Но если я делаю так например
$.post('',function(data){ var link = [] for (key in data) { link = $(data[key].content).find('a.link') ; $(div).html(data[key].content); } for (key in link) { if(link[key].attributes){ $(link[key]).on('click', function (e) { console.log(link[key]) }) } } } то ничего не работает. |
ureech,
информации недостаточно. |
Незаменимый сервис - https://beautifier.io, советую пользоваться им перед каждой публикацией вашего кода на этом форуме.
$.post('', function(data) { var link = [] for (key in data) { // .find возвращает не массив элементов, а новую коллекцию jQuery. // + вы ищите ваши ссылки в элементе, который с большой вероятность // будет размонтирован сразу после возвращении вам результата, // т.е. ваши ссылки на странице существовать не будут link = $(data[key].content).find('a.link'); // Даже если вы сначала засунете новый контент в блок, который присутствует на странице, // то в DOM останутся только узлы, которые вы добавите в последней итерации. // Тоже самое касается и вашей переменной `link` $(div).html(data[key].content); } // Тут может быть ошибка из-за того, что вы пытаетесь перебрать свойства объекта jQuery for (key in link) { if (link[key].attributes) { // Т.к. ваш массив `link` содержит ссылки на размонтированные элементы, // то никакого смысла операция ниже не несет. // Элементов, на которые вы пытаетесь повесить слушателей нет в DOM $(link[key]).on('click', function(e) { console.log(link[key]) }) } } }) Попробуйте как-то так: $.post('', function(data) { $(div) .html( Object.values(data).join('') ) .find('a.link') .filter(function() { return Boolean(this.attributes); }) .on('click', function() { console.log(this); }); }); |
Nexus,
спасибо, что разжевали. И пример рабочий). Только colorbox работает только при клике на ссылку. То есть не работают параметры. Например ... .on('click', function() { $(this).colorbox({ rel:'colorbox-link', slideshow : true // не работает }); Да и вручную не перебирает картинки. |
Догадываюсь, что его надо вешать наверное как то заранее. Но мысль не созрела ещё)
|
Заработало)))
|
Всё равно не работает корректно. Если я открываю любую ссылку первый раз, пагинации нет. Затем, если открою любую другую в ней и в первой пагинация есть из них двух и тд. То есть как только они закешируются все, только потом есть пагинация. Сброшу кеш, всё по новой.тут можно посмотреть. Можно это как то поправить?
|
ureech, может так?
$.post('', function(data) { $(div) .html( Object.values(data).join('') ) .find('a.link') .filter(function() { return Boolean(this.attributes); }) .colorbox({rel: 'main-group', open: false, slideshow: true}); }); |
Часовой пояс GMT +3, время: 09:29. |