从Ajax加载jQuery选项卡

Question

我有一个使用下面的代码工作的加载图像。 它显示了动画的gif，并等待从URL中获取html。 提取后，它会隐藏加载div并将html加载到bite div中。 返回的html全部包含在jQuery Tabs中，但是当显示html时，不呈现这些Tabs，仅显示li元素。

是否可以通过AJAX提取包含jQuery标签的html并呈现这些标签？ 如果是这样，我在做什么错？

<div id="loader" style="text-align:center; display:none;">
<img src="img/ajax-loader.gif" alt="LOADING" />
</div>

<div id="bite"></div>

$(document).ready(function () {
  $('#loader').show();
  $.ajax({
    url:'http://www.domain.com/bitesized/main.php?uid=<?php echo $uid; ?>',
    complete: function(data){
        $('#loader').hide();
        $('#bite').html(data.responseText);
        // these divs ids are available after the load above and are meant to render the tabs
        $("#tabs").tabs();
        $("#fragment-a").tabs();
    }
  });
});

Answer 1

我创建了此代码，可以使用微调器加载AJAX。 请注意，我设置并使用了来自HTML rel属性的选项“ ajax_href”。 您也可以直接从每个链接设置选项。 我还使用“宽度”和“高度”来调整每个标签内容的大小。 当选项卡具有不同的内容或文件时，它看起来不错。

$(document).ready(function() {

// check
$('.jquery_tabs_ajax').each(function() { 

    // tabs
    var $tabs = $(this).tabs({ 

        cache: false,
        ajaxOptions: { async: true, cache: false },
        show: function(event, ui) {

            // get
            var my_panel_id = '#ui-tab-' + (ui.index + 1);
            var get_panel_id = $(my_panel_id);
            var get_parent_link = get_panel_id.parents('ul:eq(0) li a[href="' + my_panel_id + '"]');
            var get_parent_rel = get_parent_link.attr('rel');

            // check options
            if(get_parent_rel) {

                // option object
                var $obj_option = {};

                // split
                $split_option_a = get_parent_rel.split(';');
                for(var so = 0; so < $split_option_a.length; so++) {
                    $split_option_b = $split_option_a[so].split('=');
                    $obj_option[$split_option_b[0]] = $split_option_b[1];
                }

                // load AJAX
                if($obj_option.ajax_href) {

                    // set spinner
                    get_panel_id.html('<div class="spinner_container"><div class="spinner"></div></div>')

                    // load AJAX
                    $.ajax({

                        type: "POST",
                        url: $obj_option.ajax_href,
                        async: true,
                        cache: false,
                        success: function(response_text) {

                            // set HTML
                            get_panel_id.html(response_text);
                        }
                    });
                }

                // check resize
                if($.colorbox && ($obj_option.width || $obj_option.height)) {

                    // resize
                    $.colorbox.resize($obj_option);
                }
            }
        }
    });
});

}）;