javascript - 调用其他 php 页面的脚本不起作用

Question

需要帮助，按钮不起作用，我的主页上的报告生成器按钮没有调用report.php页面，在Chrome中，我检查了开发人员工具下的网络选项卡，但没有得到任何事件/响应当我单击报告生成器按钮时，下面是我的主 php 页面:

<script type="text/javascript">

            $(document).ready(function(){
            $("#RetrieveList").on('click',function() {
                var xid = $('#XiD').val();
                var date = $('#Date').val();
                $.post('retrieve_test.php',{xid:xid, date:date}, function(data){
                $("#results").html(data);
                });
                return false;
            });

            $("#DeletefromDB").click(function() {
                if (confirm("Are you sure you want to delete?"))
                var id = $('input[name=checkbox]:checked').map(function()
                    {
                        return $(this).val();
                    }).get();
                $.post('delete_test.php',{id:id}, function(data){
                $("#result").html(data);
                });

                return false;
            });                 
            });

            $("#Report").on('click',function() {
            var date = $('#Date').val();
                $.post('report.php',{date:date}, function(data){
                $("#results").html(data);
                });
                return false;
            });

    </script>

        <form id="form2" name="form2" method="post" action="">

              <table width="741" border="0" align="center">
                <tr>
                  <th colspan="9" align="center" style="font-size:14px" scope="col">Xid, Name:<span>
                    <select name="XiD" id="XiD">

                      <option value="AAA">AAA</option>
                      <option value="BBB">BBB</option>
                      <option value="" selected="selected">Please Select...</option>
                    </select>
                  </span><span style="font-size:14px">
                  <label for="date">Date:</label>
                  <input type="text" name="Date" id="Date" size="8"/>
                  </span></th>
                </tr>
                <tr>
                  <th colspan="9" scope="col">&nbsp;</th>
                </tr>
                <tr>
                  <th colspan="9" scope="col">
                    <div align="center">
                      <input name="action" type="button" id="RetrieveList" value="Retrieve List" />
                      <input name="action" type="button" id="DeletefromDB" value="Delete from DB" />
                      <input name="Clear" type="reset" id="Clear" value="Clear" onClick="window.location.reload()" />
                  <input name="action" type="button" id="Report" value="Report Generator" />
                    </div>
                    <label for="Clear"></label>
                    <div align="center"></div></th>
                </tr>

              </table>
              </form>
            <div id="results">
            </div>

这是我的report.php页面代码:

<?php
    require 'include/DB_Open.php';

    $date = $_POST['date'];

    $sql="SELECT trouble_type_priority, category_1, category_2, status, COUNT (*) AS Total 
               FROM tbl_main 
               WHERE resolved_date = '$date'
               GROUP BY trouble_type_priority, category_1, category_2, status";

    $myData = mysql_query($sql)or die(mysql_error());

    echo "<table width='auto' cellpadding='1px' cellspacing='0px' border=1 align='center'>
    <tr>
        <th colspan='3' align='center'>Ticket Bucket</th>
        <th colspan='3' align='center'>Status</th>
    </tr>
    <tr>
        <th width='auto' align='center'>Severity</th>
        <th width='auto' align='center'>Category 2</th>
        <th width='auto' align='center'>Category 3</th>
        <th width='auto' align='center'>Resolved</th>
        <th width='auto' align='center'>Re-assigned</th>
        <th width='auto' align='center'>Grand Total</th>
    </tr>";

    while($info = mysql_fetch_array($myData)) 
    {
    echo"<tr>"; 

    echo  "<td align='center'>" . $info['trouble_type_priority'] . "</td>"; 
    echo  "<td align='center'>" . $info['category_1'] . "</td>"; 
    echo  "<td align='center'>" . $info['category_2'] . "</td>"; 
    echo  "<td align='center'>" . $info['status'] . "</td>"; 
    echo "</tr>"; 
    }
    echo "</table>"; 


    include 'include/DB_Close.php';
    ?>

Answer 1

看起来用于设置“报告”按钮的 onclick 事件的代码位于 $(document).ready(...) 函数之外。现在，您的 JavaScript 将在页面的其余部分准备好之前执行，此时将没有报告按钮来添加事件。

我想，这可能就是问题所在。尝试将 $("#Report").on('click', ...) 移动到 $(document).ready(...) 回调函数中.