javascript - 使用 jQuery 在表单提交中加载 HighCharts 图表/数据

Question

我有一个带有表单的 PHP 页面，提交后应返回一个 HighCharts 图表和一个包含图表数据的表格。该表单向另一个 PHP 文件发送 $_POST 请求，该文件检索变量，查询数据库，并将数据作为数组返回，该数据作为多个系列添加到 HighCharts 脚本中并输出到表中。

我希望图表和表格在提交表单之前不可见，但是无论我如何编码，我都无法更改 2 个 DIV 的可见性。当页面加载时，会触发此 jQuery:

$(function() {
$('#tableData').hide();
$('#chart-container').hide();
$('#submit').click(function() {
    $('#tableData, #chart-container').show();
    });

提交表单后，所有数据都会返回，我可以在检查器中看到所有数据，但 #tableData 和 #chart-container div 仍然显示 display:none。

我尝试将 .show 方法绑定(bind)到 .on 事件、.click 事件和 .submit 事件，但没有任何效果。

阅读 HighCharts API 引用，看起来我需要创建一个单独的函数来请求数据，然后在 load 事件中调用该函数，我只是不知道该怎么做它。我没有使用 AJAX 返回数据，这是他们在示例中显示的方法。

如何隐藏这些 div 并在单击提交按钮后显示它们？

Answer 1

我认为发生的情况是，每次提交页面时，.hide 方法都会隐藏 div，即使返回了数据。

我最终将 2 个 div 移动到条件 PHP 语句中，因此除非 POST 请求具有特定值，否则它们不存在。完全删除了 jQuery 并且它可以工作，尽管我仍然很好奇为什么以前没有。