Javascript 通过ajax返回的颜色框和内容

我正在使用jquery colorbox在窗口中弹出用户帐户。我还有一个按钮，可以通过ajax将更多用户加载到页面中，但由于某些原因，加载了ajax的用户不会在colorbox窗口中弹出。如何让colorbox处理通过ajax返回的内容

function loadMore(pageNo) {
    //$("#loading").html('Loading...').show();
    var url = '/search/resultsAjax';
    $.get(url, {page: pageNo}, function(response) {
        $("#results").append(response);
        //$("#loading").hide();
    });
}

$(document).ready(function() {
    var currPage = 1;
    $("a.next").click(function() {
        loadMore(++currPage);
    });

    $("a.usr").colorbox({width:"960px", height:"90%", iframe:true});
});

---

将

$（document）.ready（）

中的colorbox与以下内容绑定时：

$("a.usr").colorbox({width:"960px", height:"90%", iframe:true});

jQuery将搜索整个页面，获取与

a.usr

匹配的所有内容，将colorbox绑定到这些项目，然后忘记所有关于

a.usr

。jQuery不会记得您对

a.usr

感兴趣，所以新的不会是colorbox'd

解决这类问题的通常方法是使用

.live（）

或

.delegate（）

，但这些方法在这里不起作用，因为没有“colorbox”事件

不过，您可以用手轻松地绑定colorbox。尝试将

loadMore

更改为类似以下内容：

function loadMore(pageNo) {
    $.get('/search/resultsAjax', { page: pageNo }, function(response) {
        var $html = $(response);
        $html.find('a.usr').colorbox({ width: '960px', height: '90%', iframe: true });
        $('#results').append($html);
    };
}

您只需将

响应

HTML转换为jQuery对象，查找其中的所有

a.usr

内容，将colorbox绑定到这些内容，然后像往常一样将新HTML插入DOM中。

使用以下方法：

<a onclick='parent.$.colorbox({href:"schedule_delete.php?sid=<?php echo $schedule_row->schedule_id; ?>"}); return false;'>delete</a

---

如果要使其在全局范围内工作，而不管内容是如何加载的：

$('body').on('click', 'a.usr', function() {
    $(this).colorbox({width:"960px", height:"90%", iframe:true});
});

谢谢您的回复，我只是想知道，如果我先附加html，然后重新绑定colorbox，会有什么不同吗？@BugBusterX：您可能会将colorbox绑定到同一个元素两次，这可能会导致一些混乱和奇怪的行为。Colorbox可能能够处理双重绑定，但我不依赖它。