Jquery colorbox不使用Ajax

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

但是对于第一个项目，colorbox是打开的，之后我无法绑定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，它只调用了一次，然后在单击next之后，它不会将我的下一项绑定到colorbox

请帮忙

---

谢谢

您可以使用jquery函数将事件绑定到尚未创建的元素。我认为这是您可能需要的。

像这样思考您的问题：在页面加载时，最初DOM已准备就绪，并且colorbox已初始化为选择器，AJAX使用colorbox选择器列表中的某个DOM元素调用页面的新部分，但是没有注意到，因为它是在javascript读取选择器之后加载到页面中的

现在试试这个，因为它为所有现有和新的应用程序观看“推荐的应用程序包装器”。应用程序下载链接：

这样，就不用等待插件监视事件，而是使用.delegate（）监视事件，并动态执行colorbox

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

$("#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();
                          });
                });