Добавить в лайтбокс, не работающий с динамически загружаемым контентом (AJAX PHP)

Question

Привет, у меня есть код, который добавляет модели в лайтбокс, этот код работает, как и ожидалось, на статических страницах, например так: http://pha -group.com / models / females /

    $scope.add = function(permalink, post_id)
{
    if (typeof(Storage) !== "undefined") {
        var selectedOption = localStorage.lightbox_list;
    } else {
        var selectedOption = null;
    }


    $http.get('/wp-admin/admin-ajax.php?action=lightbox_add_talent_ajax&permalink='+permalink+'&list='+selectedOption).success(function(data) {


        var pop_up_talent = data.attachments;

        if(pop_up_talent)
        {
            var pop_up_talent = $.map(pop_up_talent, function(value, index) {
                return [value];
            });

            $scope.lightbox_popup = pop_up_talent.slice(0, 3);

        }


        $scope.lightbox = data.attachments;

        updateBubbleCounter();

        loading(data.last_insert, 'add');

    }).error(function(){
        console.log('unable to add to lightbox list');
    });

};

Однако на этой странице: http://raretalent.pha -group.com / Я загружаю талант динамически с помощью этого кода ..

        function get_posts($params) {

        $container = $('#container-async');
        $content   = $container.find('.content-ajax');
        $status    = $container.find('.status');

        $status.text('Fetching talent...');

        $.ajax({
                    //url: bobz.ajax_url,
                    url: "/wp-admin/admin-ajax.php",
                    data: {
                        action: 'do_filter_posts',
                    nonce: bobz.nonce,
                    params: $params
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function(data, textStatus, XMLHttpRequest) {

                        if (data.status === 200) {
                            $content.html(data.content);
                        }
                        else if (data.status === 201) {
                            $content.html(data.message);    
                        }
                        else {
                            $status.html(data.message);
                        }

                        script_cycle();
                 },
                 error: function(MLHttpRequest, textStatus, errorThrown) {

                $status.html(textStatus);

                /*console.log(MLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);*/
                 },
            complete: function(data, textStatus) {

                msg = textStatus;

                if (textStatus === 'success') {
                    msg = data.responseJSON.found;
                }

                // $status.text('Posts found: ' + msg);
                $status.text('');

                /*console.log(data);
                console.log(textStatus);*/
            }
        });
    }

И когда я нажимаю, чтобы добавить в лайтбокс на этой странице http://raretalent.pha -group.com / , ничего не происходит !! Я знаю, что мне нужно загрузить функцию лайтбокса при успешном вызове AJAX, но я не уверен, как это сделать.

Answer 1

Загружая контент через ajax, вы добавляете его на страницу после завершения функции значка плюса. Таким образом, к динамическим элементам не применяется обработчик событий. Я не угловой экспорт, но, возможно, это поможет вам.

https://medium.com/@jsoo1/dynamic-content-with-angularjs-7a88b931c136