Javascript jQueryUI选项卡中的另一个JQuery组件，具有Ajax页面调用

我目前正在使用jQueryU选项卡进行Ajax页面调用。在页面中，我有一个自定义的滚动条，可以正常工作。我还有一个ajax搜索表，当页面在浏览器中单独加载时，该表工作，但在jqueryui选项卡中调用时不工作

以下是JQuery UI选项卡的代码

Javascript调用

  <script>
  $(function() {

    // getter
var heightStyle = $( ".selector" ).tabs( "option", "heightStyle" );

// setter
$( ".selector" ).tabs( "option", "heightStyle", "fill" );
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });
  </script>

$（函数（）{
//吸气剂
var heightStyle=$（“.selector”）.tabs（“选项”、“heightStyle”）；
//塞特
$（“.selector”）.tabs（“选项”、“高度样式”、“填充”）；
$（“#制表符”）。制表符({
加载前：函数（事件、ui）{
ui.jqXHR.error（函数（）{
ui.panel.html(
“无法加载此选项卡。我们将尝试尽快修复此问题。”+
“如果这不是演示的话。”）；
});
}
});
});

HTML:

以下是page2.html中的代码：

<div class="tables">
    <div id="content_3" class="content">
    <div class="search">
        <div class="searchtitle">Search</div>
        <label for="search"><input type="text" id="search"/></label>        
    </div>


    <table id="tblData" class="target">
        <tbody>
            <tr>
                <th width="110px">Course</th>
                <th width="92px">Group</th>
                <th width="204px">Period</th>
                <th width="81px">Room</th>
                <th width="117px">Actions</th>
            </tr>
            <tr>
                <td class="odd">Unit 1</td>
                <td class="odd">Group 2</td>
                <td class="odd">00-00-00 - 00-00-00 </td>
                <td class="odd">Room 1</td>
                <td class="odd"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
            </tr>
            <tr>
                <td class="even">Unit#</td>
                <td class="even">###</td>
                <td class="even">00-00-00 - 00-00-00 </td>
                <td class="even">Room 2</td>
                <td class="even"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
            </tr>
            <tr>
                <td class="odd">Unit#</td>
                <td class="odd">###</td>
                <td class="odd">00-00-00 - 00-00-00 </td>
                <td class="odd">###</td>
                <td class="odd"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
            </tr>


        </tbody>
    </table>
</div>

</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#search').keyup(function()
        {
            searchTable($(this).val());
        });
    });
    function searchTable(inputVal)
    {
        var table = $('#tblData');
        table.find('tr').each(function(index, row)
        {
            var allCells = $(row).find('td');
            if(allCells.length > 0)
            {
                var found = false;
                allCells.each(function(index, td)
                {
                    var regExp = new RegExp(inputVal, 'i');
                    if(regExp.test($(td).text()))
                    {
                        found = true;
                        return false;
                    }
                });
                if(found == true)$(row).show();else $(row).hide();
            }
        });
    }
</script>

<div class="tables">
    <div id="content_3" class="content">
        <div class="search">
            <div class="searchtitle">Search</div>
            <label for="search"><input type="text" id="search"/></label>        
        </div>
        <table id="tblData" class="target">
            <tbody>
                <tr>
                    <th width="110px">Course</th>
                    <th width="92px">Group</th>
                    <th width="204px">Period</th>
                    <th width="81px">Room</th>
                    <th width="117px">Actions</th>
                </tr>
                <tr>
                    <td class="odd">Unit 1</td>
                    <td class="odd">Group 2</td>
                    <td class="odd">00-00-00 - 00-00-00 </td>
                    <td class="odd">Room 1</td>
                    <td class="odd">
                        <img src="../../Images/actions-delete-icon-normal.png"/>
                        <img src="../../Images/actions-edit-icon-normal.png"/>
                    </td>
                </tr>
                <tr>
                    <td class="even">Unit#</td>
                    <td class="even">###</td>
                    <td class="even">00-00-00 - 00-00-00 </td>
                    <td class="even">Room 2</td>
                    <td class="even">
                        <img src="../../Images/actions-delete-icon-normal.png"/>
                        <img src="../../Images/actions-edit-icon-normal.png"/>
                    </td>
                </tr>
                <tr>
                    <td class="odd">Unit#</td>
                    <td class="odd">###</td>
                    <td class="odd">00-00-00 - 00-00-00 </td>
                    <td class="odd">###</td>
                    <td class="odd">
                        <img src="../../Images/actions-delete-icon-normal.png"/>
                        <img src="../../Images/actions-edit-icon-normal.png"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#search').keyup(function()
        {
            searchTable($(this).val());
        });
    });

    function searchTable(inputVal)
    {
        var table = $('#tblData');
        table.find('tr').each(function(index, row)
        {
            var allCells = $(row).find('td');
            if(allCells.length > 0)
            {
                var found = false;
                allCells.each(function(index, td)
                {
                    var regExp = new RegExp(inputVal, 'i');
                    if(regExp.test($(td).text()))
                    {
                        found = true;
                        return false;
                    }
                });

                if(found == true)
                    $(row).show();
                else
                    $(row).hide();
            }
        });
    }
</script>

搜寻
课程
团体
时期
房间
行动
第一单元
第2组
00-00-00 - 00-00-00 
1号房间
单位#
###
00-00-00 - 00-00-00 
2号房间
单位#
###
00-00-00 - 00-00-00 
###
$（文档）.ready（函数（）
{
$（“#搜索”）.keyup（函数（）
{
searchTable（$（this.val（））；
});
});
函数搜索表（inputVal）
{
变量表=$（'tblData'）；
table.find（'tr'）。每个函数（索引，行）
{
var allCells=$（行）.find（'td'）；
如果（allCells.length>0）
{
var=false；
所有单元格。每个（函数（索引，td）
{
var regExp=新的regExp（inputVal，'i'）；
if（regExp.test（$（td.text（）））
{
发现=真；
返回false；
}
});
if（find==true）$（行）.show（）；else$（行）.hide（）；
}
});
}

我怀疑是page2.html中Javascript中的$（document）.ready（function（））没有启动

---

解决此问题有什么帮助吗？

我在加载搜索功能时没有遇到任何问题，因为我用您的代码创建了一个测试。但是，由于您没有在起始页显示完整的html，您的问题可能是您在尝试获取任何其他页面之前没有加载jQuery。其中有一些错误，如calli将

tab（）

函数禁用3次（并且使用

选择器对不存在的元素禁用
类）。当您只需要一个时，设置了所有选项。我还将
heightStyle
更改为
content
。无法创建JSFIDLE演示，因为您有两个html页面，但我的代码对我来说很好：

起始页：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
        <script>
            $(function()
            {
                $( "#tabs" ).tabs(
                {
                    heightStyle: "content",
                    beforeLoad: function( event, ui )
                    {
                        ui.jqXHR.error(function()
                        {
                            ui.panel.html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo." );
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">View</a></li>
                <li><a href="page2.html">Add</a></li>
                <li><a href="page3.html">Modify</a></li>
            </ul>
            <div id="tabs-1">View Page</div>
        </div>
    </body>
</html>


$（函数（）
{
$（“#制表符”）。制表符(
{
高度样式：“内容”，
加载前：函数（事件、ui）
{
ui.jqXHR.error（函数（）
{
html（“无法加载此选项卡。我们将尝试尽快修复此问题。如果这不是演示。”）；
});
}
});
});





查看页面

第2.html页：

<div class="tables">
    <div id="content_3" class="content">
    <div class="search">
        <div class="searchtitle">Search</div>
        <label for="search"><input type="text" id="search"/></label>        
    </div>


    <table id="tblData" class="target">
        <tbody>
            <tr>
                <th width="110px">Course</th>
                <th width="92px">Group</th>
                <th width="204px">Period</th>
                <th width="81px">Room</th>
                <th width="117px">Actions</th>
            </tr>
            <tr>
                <td class="odd">Unit 1</td>
                <td class="odd">Group 2</td>
                <td class="odd">00-00-00 - 00-00-00 </td>
                <td class="odd">Room 1</td>
                <td class="odd"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
            </tr>
            <tr>
                <td class="even">Unit#</td>
                <td class="even">###</td>
                <td class="even">00-00-00 - 00-00-00 </td>
                <td class="even">Room 2</td>
                <td class="even"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
            </tr>
            <tr>
                <td class="odd">Unit#</td>
                <td class="odd">###</td>
                <td class="odd">00-00-00 - 00-00-00 </td>
                <td class="odd">###</td>
                <td class="odd"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
            </tr>


        </tbody>
    </table>
</div>

</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#search').keyup(function()
        {
            searchTable($(this).val());
        });
    });
    function searchTable(inputVal)
    {
        var table = $('#tblData');
        table.find('tr').each(function(index, row)
        {
            var allCells = $(row).find('td');
            if(allCells.length > 0)
            {
                var found = false;
                allCells.each(function(index, td)
                {
                    var regExp = new RegExp(inputVal, 'i');
                    if(regExp.test($(td).text()))
                    {
                        found = true;
                        return false;
                    }
                });
                if(found == true)$(row).show();else $(row).hide();
            }
        });
    }
</script>

<div class="tables">
    <div id="content_3" class="content">
        <div class="search">
            <div class="searchtitle">Search</div>
            <label for="search"><input type="text" id="search"/></label>        
        </div>
        <table id="tblData" class="target">
            <tbody>
                <tr>
                    <th width="110px">Course</th>
                    <th width="92px">Group</th>
                    <th width="204px">Period</th>
                    <th width="81px">Room</th>
                    <th width="117px">Actions</th>
                </tr>
                <tr>
                    <td class="odd">Unit 1</td>
                    <td class="odd">Group 2</td>
                    <td class="odd">00-00-00 - 00-00-00 </td>
                    <td class="odd">Room 1</td>
                    <td class="odd">
                        <img src="../../Images/actions-delete-icon-normal.png"/>
                        <img src="../../Images/actions-edit-icon-normal.png"/>
                    </td>
                </tr>
                <tr>
                    <td class="even">Unit#</td>
                    <td class="even">###</td>
                    <td class="even">00-00-00 - 00-00-00 </td>
                    <td class="even">Room 2</td>
                    <td class="even">
                        <img src="../../Images/actions-delete-icon-normal.png"/>
                        <img src="../../Images/actions-edit-icon-normal.png"/>
                    </td>
                </tr>
                <tr>
                    <td class="odd">Unit#</td>
                    <td class="odd">###</td>
                    <td class="odd">00-00-00 - 00-00-00 </td>
                    <td class="odd">###</td>
                    <td class="odd">
                        <img src="../../Images/actions-delete-icon-normal.png"/>
                        <img src="../../Images/actions-edit-icon-normal.png"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#search').keyup(function()
        {
            searchTable($(this).val());
        });
    });

    function searchTable(inputVal)
    {
        var table = $('#tblData');
        table.find('tr').each(function(index, row)
        {
            var allCells = $(row).find('td');
            if(allCells.length > 0)
            {
                var found = false;
                allCells.each(function(index, td)
                {
                    var regExp = new RegExp(inputVal, 'i');
                    if(regExp.test($(td).text()))
                    {
                        found = true;
                        return false;
                    }
                });

                if(found == true)
                    $(row).show();
                else
                    $(row).hide();
            }
        });
    }
</script>


搜寻
课程
团体
时期
房间
行动
第一单元
第2组
00-00-00 - 00-00-00 
1号房间
单位#
###
00-00-00 - 00-00-00 
2号房间
单位#
###
00-00-00 - 00-00-00 
###
$（文档）.ready（函数（）
{
$（“#搜索”）.keyup（函数（）
{
searchTable（$（this.val（））；
});
});
函数搜索表（inputVal）
{
变量表=$（'tblData'）；
table.find（'tr'）。每个函数（索引，行）
{
var allCells=$（行）.find（'td'）；
如果（allCells.length>0）
{
var=false；
所有单元格。每个（函数（索引，td）
{
var regExp=新的regExp（inputVal，'i'）；
if（regExp.test（$（td.text（）））
{
发现=真；
返回false；
}
})