jquery - jQuery Colorbox：无法通过 ajax 加载单个 ID（不是整个页面）

Question

我正在尝试加载一个#submit-text-form通过 jQuery colorbox 命名的表单。但是，colorbox 最终会加载原始链接所针对的整个页面。我按照此处的说明进行操作，但它仍在加载整页。关于我可能做错了什么的任何想法？

$(function(){
$('#submit-link').colorbox({
opacity: 0.3,
transition: 'fade',
href: $("#submit-link").attr('href') + "#submit-text-form",
});
});

Answer 1

试试这个：

$(function(){
$('#submit-link').colorbox({
opacity: 0.3,
transition: 'fade',
href: $("#submit-link").attr('href') + " #submit-text-form",
});
})

您的选择器之前需要有一个空格" #submit-text-form。Colorbox 使用 jQuery 的 load() 方法进行 ajax 处理，因此它的工作方式相同。

Answer 2

当您直接从浏览器打开应该在颜色框中显示的页面时，您应该只看到里面的页面。如果没有，仍然必须加载整个页面并显示其中的一部分，使用 ajax 获取数据，成功时使用 DOM 选择器获取所需的部分，然后在颜色框中显示它。

像这样：

$.get($("#submit-link").attr('href'), 
    function(response) {
        //Load the AJAX response into a jQuery variable
        var $html = $(response);
        //Get the portion which you need to show inside the colorbox
        $html.find('#submit-text-form').colorbox({ opacity: 0.3, transition: 'fade');
        //Append it to body. (I didn't use colorbox before.)
        $('body').append($html);
});

注意：我没有测试它，我之前没有使用过colorbox，但这是你想要的我想的方式。