使用.load（）无法将嵌入在面板页面中的按钮单击单击

Question

单击菜单选项时，我有一个菜单页面，我希望在面板中打开另一个页面。 该页面随我的代码一起打开，但是当单击search按钮时，不会像单独运行search.html时那样显示表格。

这是search.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>

Answer 1

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

使用.load（）无法将嵌入在面板页面中的按钮单击单击

问题描述

1 个解决方案

解决方案1
0 2016-07-12 22:01:13

使用.load（）无法将嵌入在面板页面中的按钮单击单击

问题描述

1 个解决方案

解决方案1 0 2016-07-12 22:01:13

解决方案1
0 2016-07-12 22:01:13