使用Ajax的选项卡内容，我在选项卡中的javascript无效

Question

So i'm using flowplayer's JqueryTools, tabs for navigation. Everything i'm loading is really simple. Mainly html tables and forms, and they work great. Except on one page where i use tablefilter.free.fr's tablefilter. The table filter will not load when i use the tabs. When i just open the php, then everything works fine. I was wondering if anyone could tell me what i'm doing wrong here? I don't have much experience with javascript.

My main page is really simple.

<script blah blah blah tabletools.js>
<ul class="css-tabs">
<li><a href="ajax1.php">Tab 1</a></li>
<li><a href="ajax2.php">Second tab</a></li>
<li><a href="ajax3.php">An ultra long third tab</a></li>
</ul>


<div class="css-panes">
<div style="display:block"></div>
$(function() {

$("ul.css-tabs").tabs("div.css-panes > div", {effect: 'ajax', hitory: true});

});
</div>

And the ajax.php's are really simple tables, and for some reason the filter doesn't work when i load the page in the tabs. I load the filter with a class in the table, and i think that may be the problem.

<script type="text/javascript" language="javascript" src="TableFilter/tablefilter.js"></script>  

    <table id="table1" cellspacing="0" class="mytable filterable" >  

Any feedback would be appreciated.

Answer 1

jQuery Tools Tabs & TableFilter

<script type="text/javascript">
    $(function() {
        $('ul.css-tabs').tabs('div.css-panes > div', {
            effect: 'fade',
            history: true,
            onBeforeClick: function(event, i) {
                // get the pane to be opened
                var pane = this.getPanes().eq(i);

                // only load once. remove the if ( ... ){ } clause if you want the page to be loaded every time
                if (pane.is(':empty')) {
                    // load it with a page specified in the tab's href attribute
                    pane.load(this.getTabs().eq(i).attr('href'), function(){
                        setFilterGrid('table'+(i+1));
                    });
                }
            }
        });
    });
</script>

1. The above code should come after including jQuery, jQuery Tools Tabs, and TableFilter files.

2. Your tables should have an incremental id for each tab like table1, table2, table3, ...