嵌入在面板页面中的按钮单击使用 .load(） 不起作用

Button click embedded in a page in a panel does not work using .load()

本文关键字：load 单击 不起作用 按钮      更新时间：2023-09-26

当我单击菜单选项时，我有一个菜单页面，我希望在面板中打开另一个页面。页面使用我的代码打开，但单击搜索按钮时不会像独立运行搜索.html时那样显示表。

这是搜索.html。我正在使用$.load("search.html") jQuery函数，但我不确定它是否是正确的使用。

<script type="text/javascript">
    $(window).load(function() {
        setTimeout(function() {
            $('#loading').fadeOut( 400, "linear" );
        }, 300);
    });
    $(document).ready(function () {
        $(' li').click(function (e) {
            e.preventDefault();
            var $this = $(this);
            $('.panel').hide();
            $('#' + $this.find('a').attr('href')).show();
            return false;
        });
    }); // end ready
</script>
</head>
<body>
<div id="sb-site">
    <div class="sb-slidebar bg-black sb-left sb-style-overlay">
        <div id="page-sidebar">
            <div class="scroll-sidebar">
                <ul id="sidebar-menu">
                <li>
                    <a href="x_Information_System.html" title="Admin Dashboard">
                        <i class="glyph-icon icon-linecons-tv"></i>
                        <span>Home</span>
                    </a>
                </li>
                <li class="divider"></li>
                <li class="active"><a href="panel1" title="x" ><span>x</span></a></li>
                <li><a href="panel2" title="A"><span>A</span></a></li>
                <li><a href="panel3" title="L"><span>L</span></a></li>
                <li class="divider"></li>
                </ul><!-- #sidebar-menu -->
            </div>
        </div>
        <div id="page-content-wrapper">
            <div id="page-content">     
                <div id ="panel1" class="panel panel-primary" style="display: none;max-width:1000px;margin-left:auto;margin-right:auto;">
                    <div class="panel-body">content xs </div>
                    <script>$( "#panel1" ).load( "search.html" );</script>
                </div>
                <div id ="panel2" class="panel panel-primary" style="display: none;max-width:1000px;margin-left:auto;margin-right:auto;">
                    <div class="panel-body">content a</div>    
                </div>
                <div id ="panel3" class="panel panel-primary" style="display: none;max-width:1000px;margin-left:auto;margin-right:auto;">
                    <div class="panel-body">content l</div>    
                </div>
            </div>
        </div>
    </div>
</div>

这是在单击按钮时显示表格的搜索页面：

<div id="page-content-wrapper">
    <div id="page-content">
        <div class="container">
            <script type="text/javascript" src="assets/widgets/datatable/datatable.js"></script>
            <script type="text/javascript" src="assets/widgets/datatable/datatable-bootstrap.js"></script>
            <script type="text/javascript" src="assets/widgets/datatable/datatable-tabletools.js"></script>
            <div id="page-title">
                <h2> Details</h2>   
            </div>
        </div>
        <div class="panel-box col-lg-12">
            <form class="form-horizontal" role="form" method="get">
                <div class="form-group">
                    <label class="col-md-4 control-label">Please enter a  Number</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="name" >
                    </div>
                    <button class="btn btn-blue-alt" id="search" >Search</button>
                </div>  
            </form>
        </div>
        <div class="panel">
            <div class="panel-body">
                <table class="datatable" cellpadding="0" cellspacing="0" border="0" id="resultTable">
                    <thead>
                        <tr>
                            <th> Id</th>
                            <th> Number</th>
                            <th> Serial Number</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('.btnSearch').click(function() {
                    makeAjaxRequest();
                });
                $('form').submit(function(e) {
                    e.preventDefault(); 
                    makeAjaxRequest();
                    return false;
                });
                function makeAjaxRequest() {
                    $.ajax({
                        url:        'php/_search.php', 
                        data:       {name: $('input#name').val()},
                        type:       'get', 
                        success:    function(response) { 
                                        $('table#resultTable tbody').html(response);
                                    }
                    });
                }
            });
        </script> 
    </div>
</div>

这与javascript无关。问题是我将所有其他面板设置为隐藏以启用菜单导航，并且子页面中的表格位于面板中，并且显示设置为无。因此，当我删除桌子周围的面板时，它被显示出来

相关文章：