colorbox 不支持 Ajax

Question

我正在尝试从 ajax 调用动态加载的内容中打开 colorbox。单击“下一步”时，它会在页面上加载另一个块，单击该块时，应打开颜色框覆盖。

但是对于第一个项目颜色框打开，然后我无法将颜色框与链接绑定。

请看，我用于绑定 colorbox 的 javascript 代码是：

$(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 的块。我已经截取了代码的屏幕截图。

我认为，问题是，我将颜色框绑定在document.ready 仅被调用一次，然后单击“下一个”后，它不会将我的下一个项目绑定到颜色框。

请帮忙。

谢谢

Answer 1

您可以使用 jquery .live() 函数将事件绑定到尚未创建的元素它。我想这就是你可能需要的。

Answer 2

像这样思考你的问题：在页面加载时，最初 DOM 已准备好，并且为选择器初始化了 colorbox AJAX 调用页面的一个新部分，其中包含一些位于 colorbox 选择器列表中的 DOM 元素，但没有被注意到，因为它在 JavaScript 读取选择器后加载到页面中。

现在尝试这个，因为它会监视所有现有的和新的“.app_download_link”的“#recommished-app-wrapper”：

$("#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() 监视事件，并且即时执行颜色框...

onComplete 函数可能不完全是您所需要的，但您明白了。