Обращение к DOM после ajax

[ureech]

Привет.

let div = document.getElementById('about-result');
$.post('',function(data){
                for (key in data) {                                
                    $(div).html(data[key].content);
                }
}
console.log(div.innerHTML) // Пустая строка

Хотя там,в innerHTML всё на месте и контент на странице есть. Что не так?

[рони]

. Что не так?

строка 7 не будет ждать ответа сервера и выполнится раньше строки 3

[ureech]

Логично. Я вынес это дело из запроса, вот почему. В $(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,
информации недостаточно.

[Nexus]

Незаменимый сервис - 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);
        });
});

[ureech]

Nexus,
спасибо, что разжевали. И пример рабочий). Только colorbox работает только при клике на ссылку. То есть не работают параметры. Например

...
                .on('click', function() {
                   $(this).colorbox({
                     rel:'colorbox-link', 
                     slideshow : true // не работает
                    });

Да и вручную не перебирает картинки.

[ureech]

Догадываюсь, что его надо вешать наверное как то заранее. Но мысль не созрела ещё)

[ureech]

Заработало)))

[ureech]

Всё равно не работает корректно. Если я открываю любую ссылку первый раз, пагинации нет. Затем, если открою любую другую в ней и в первой пагинация есть из них двух и тд. То есть как только они закешируются все, только потом есть пагинация. Сброшу кеш, всё по новой.тут можно посмотреть. Можно это как то поправить?

[Nexus]

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});
});