colorbox не работает с Ajax - PullRequest
Новая
       8

colorbox не работает с Ajax

0 голосов
/ 09 сентября 2011

Я пытаюсь открыть colorbox из динамически загруженного содержимого от вызовов ajax.При нажатии кнопки «Далее» загружается еще один блок на странице, а при нажатии на этот блок необходимо открыть наложение цвета.

Но для первого элемента colorbox открывается, а затем после того, как я не могу связать colorbox со ссылкой.

Пожалуйста, смотрите, мой код JavaScript, который используется для привязки colorbox: 

$(document).ready(function() {
    $('#recommended-app-wrapper .app_download_link').each(function() {
        $(this).colorbox({
            href: $(this).attr('href'),
            iframe: false,
            onComplete: function() {
                //  Tooltip
                $('#modal a.link_tooltip').each(function() {
                    $(this).click(function() {
                        return false;
                    });
                    var content = $(this).next('.hidden').html();
                    $(this).aToolTip({   
                        tipContent: content,
                        fixed: true,
                        clickIt: false,
                        xOffset: -180,
                        yOffset: 30
                    });
                });
                //  Clear-Default
                $('#modal input.clear-default').clearDefault();
            }
        });
    });
});

JSP-код, который вызывает страницу содержимого: 

<dsp:a page="/fragments/product_app_download.jsp" iclass="custom custom-blue-smapp_download_link get-app">
    <dsp:param name="id" param="element.id"/>
    Get app
</dsp:a>

Пожалуйста, посмотрите главную страницу, откуда выполняется вызов ajax, и он загружает блок, из которого пользователь может щелкнуть и открытьColorbox.Я сделал снимок экрана с кодом.

http://i.imgur.com/Z0BVQ.png

Я думаю, проблема в том, что я привязываю colorbox к document.ready, который вызывается только один раз, затем послещелчок по следующему не привязывает мой следующий элемент к colorbox.

Пожалуйста, помогите.

спасибо

Ответы [ 2 ]

0 голосов
/ 24 января 2012

Думайте о своей проблеме следующим образом: при загрузке страницы изначально DOM готов, и colorbox инициализируется для селектора AJAX вызывает новый фрагмент страницы с некоторым элементом DOM, который находится в списке селектора colorbox, но незаметил, потому что он загрузился на страницу после того, как селектор был прочитан javascript.

Теперь попробуйте это, так как он просматривает «# рекомендуемое приложение-оболочка» для всех существующих и новых «.app_download_link»: 

$("#recommended-app-wrapper").delegate(".app_download_link", "click", function (event) {
                    event.preventDefault();
                    $.colorbox({href: $(this).attr("href"),
                            transition: "fade",
                            innerHeight: '515px',
                            innerWidth: '579px',
                            overlayClose: true,
                            iframe: true,
                            opacity: 0.3},
                            onComplete: function() {
                                $('#modal a.link_tooltip').each(function(event) {
                                    if(event === "click")
                                        return false;
                                    var content = $(this).next('.hidden').html();
                                    $(this).aToolTip({   
                                       tipContent: content,
                                       fixed: true,
                                       clickIt: false,
                                       xOffset: -180,
                                       yOffset: 30
                                    });
                                });
                                //  Clear-Default
                                $('#modal input.clear-default').clearDefault();
                          });
                });

Таким образом, вместо того, чтобы ждать, пока плагин наблюдает за событием, наблюдайте событие с помощью .delegate () и выполняйте colorbox на лету ...

Функция onComplete можетне совсем то, что вам нужно, но вы поняли.

0 голосов
/ 09 сентября 2011

Вы можете использовать функцию jquery .live () , чтобы привязать события к элементам, которые даже не были созданы.Я думаю, это то, что вам может понадобиться.

...