无法在 ajax 加载的 div 中执行 javascript

Question

I'm using ajax to load some content inside a div, and this includes the jQueryVericalTabs plugin. However the styles won't work an I just see the unformatted text.

With FF's web developer tool I see that the rendered source is not linking to the styles on my CSS file despite being correctly called on the index page. I tried writing the CSS directly on index.php, on the content file, putting it inside the body tags, with and without the javascript (per plugin's demo), and also the suggestion on this post but none worked, don't know what else to try. Here's what my header looks like:

<link rel="stylesheet" href="css/jquery-jvert-tabs-1.1.4.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-jvert-tabs-1.1.4.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $(function(){
            $("#accordion").accordion({
                active: false,
                autoHeight: false,
                collapsible: true
            });
        });

    $("#vtabs5").jVertTabs({
        equalHeights: true
    });
    // add click events for open tab buttons
    $("input[id^=openTab]").each(function(index){
        $(this).click(function(){
            openTab("#vtabs6",index);
            return false;
        });
    }); 
    function openTab(tabId,index){
        $(tabId).jVertTabs('selected',index);
    }
});

I tried a different plugin, verticalTabs, and the tab-titles show with the correct formatting, but no tab-content is displayed. I'd still prefer to use the first plugin though, the HTML is a lot cleaner.

I appreciate any input.

Answer 1

Its just a suggestion, i have never tried it, but according to the jquery documentations, you can achieve and handle ajax loaded contents using .live() event. Check the documentation here. Hope it helps and if you get an answer, please post it back

Answer 2

Thanks for your reply. I solved it with the suggestion from this post , in case someone finds it useful:)