0

编辑以更好地解释我的问题是：

  • 我有一个以第 1 页为内容的 Div。
  • 第 1 页有一个按钮，可以将我的 div 的内容更改为第 2 页。
  • 第 2 页有一个按钮，可以将我的 div 的内容更改为第 1 页。

问题： 如果首先加载第 1 页，则该按钮不执行任何操作。如果首先加载第 2 页，则按钮将内容更改为第 1 页。并且第 1 页上的按钮然后工作（如果第 1 页在第 2 页之前加载，则不会！这是我的问题！）。

我一直在尝试开发一个数学训练工具。实际上，我似乎在一开始就失败了，因为我只是看不到以下行为的原因。

问题： 为什么这只有在我首先以错误的顺序加载页面时才有效？

此处的页面： 发布底部的MathTrainer页面代码。

我正在尝试什么：

我有一个选择页面加载到一个 div 中，这个 div 由一个 php-include 填充。当点击按钮时，我希望 div 的内容更改为实际的培训工具。所以“问题” - “选项1” - “选项2”......等等。与一个按钮一起通过相同的方法返回选择。

此更改通过提交按钮中的“onclick”处理，并在 JS 中调用函数。即：

$("#trainercontent").load('trainerAbfrage.php');

怎么了：

什么都没有，.. 就像我猜由于提交功能而导致的页面重新加载。div 内容没有改变。

是什么导致了这种意想不到的行为？

除了不工作之外，我还尝试首先包含培训工具并使用那里的按钮返回选择（显然应该首先显示）。它确实有效。当我将页面编码为“ISO”并在切换到 UTF-8 时停止工作时，它也确实有效。编码不应该像这样弄乱我的页面，对吧？

是什么让这更加出乎意料？

如果我首先包含培训页面，请使用后退按钮进入选择页面，然后点击“开始”按钮，它也可以工作！这真的让我很困惑，因为它是完全相同的代码，加载了相同的文件！如果它不是显示的第一页，为什么它会起作用？

我试图调试的内容：

  1. 我删除了 php-include 并将其替换为加载页面上的 javafunction，以检查我的问题是否涉及 php。相同的行为。如果首先显示选择，我无法切换到培训师，但如果首先显示培训师，我可以背靠背切换。
  2. 切换回ISO编码，没有运气。
  3. 然后我试图改变我的文件结构（我知道，但真的没有想法了），所以每个文件都在我服务器上的同一个文件夹中。相同的行为。

代码，主页：

<!doctype html>
<html lang="de">
<head>
        <!-- Titel der Webseite -->
        <title>Mathematik - Definitions-Trainer</title>

        <!-- Metadaten der Webseite -->
        <meta charset="UTF-8">
        <meta name="author" content="Heumann Marco">
        <meta name="keywords" content="Mathe, Mathematik, Lehramt, Gymnasium, Trainer, Übungen, lernen, Axiom, Axiome, Definition, Definitionen">
        <meta name="description" content="Definitions und Axioms-Trainer für das Lehramt der Mathematik an Gymnasien.">

        <!-- Verweis auf die JavaScripte die benutzt werden sollen -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script><!-- weil jQuery sexy ist-->
        <script type="text/javascript" src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script><!-- Matheformeln aufhübschen hiermit -->
        <script type="text/javascript" src="../javascript/ios.js"></script><!-- damits mit Touchscreens auch gut geht -->

        <!-- Eigene Javascripte -->
        <script type="text/javascript" src="javaTrainer.js"></script>

        <!-- Verweis auf die Styledateien die benutzt werden soll -->
        <link rel="stylesheet" type="text/css" href="styleTrainer.css"> 
</head>

<body>
    <div id="trainerheader">
        <h1>Definitions und Axioms - Trainer</h1>
    </div>

    <div id="trainercontent">
        <?php 
            //dynamischer php-Aufbau des Contents
            include 'trainerAuswahl.php';
        ?>
    </div>

    <div id="footer">
        <!-- php include des Footers-->
        <?php include '../includes/footer.php'; ?>
    </div>
</body>

代码，选择页面：

<h2>Wähle Deine Abfrageoptionen</h2>
<form>
<fieldset>
<legend>Bereich einschränken</legend>
<p>
  <label>Semester / Kurs</label>
  <select id = "listSemester" name="selectSemester">
    <option value = "0">Alle</option>
    <option value = "1">1. Semester - Analysis einer Variablen</option>
    <option value = "2">2. Semester - Lineare Algebra</option>
  </select>
</p>

<p>
  <label>Kapitel / Thema</label>
  <select id = "listKapitel" name="selectKapitel">
    <option value = "1">Alle</option>
  </select>
</p>
 </fieldset>
 <fieldset>
<legend>Art der Abfrage</legend>
  <p>Unabhängig von der gewählten Option werden alle Relevanten Infos in der        Auflösung angezeigt. Je nach Frage kann es auch weitere Hinweise und Erklärungen geben.</p>
  <br/>       

  <input type = "radio" name = "skill" id = "geringID" value = "gering" checked =   "checked" />
  <label for = "geringID"><font color="green">Leicht</font> für Einsteiger, viel Text.</label><br/> 

  <input type = "radio" name = "skill" id = "gutID" value = "gut" />
  <label for = "gutID"><font color="orange">Medium</font> für Prüfungsvorbereitung, viele Formeln.</label><br/> 

  <input type = "radio" name = "skill" id = "perfektID" value = "perfekt" />
  <label for = "perfektID"><font color="red">Schwer</font> für Freaks, nur Formeln, Zahlen und Griechen!</label><br/>

  <input type = "radio" name = "skill" id = "testID" value = "test" />
  <label for = "perfektID"><font color="blue">Debug</font> für Testzwecke</label><br/>        
</fieldset>     
<p>
  <input type="submit" onclick="abfrage();" value="Starte die Abfrage"/>
</p>

代码，培训页面：

<h2>Hier werden sie getestet!</h2>

<h3>Frage...</h3>
<p>Option 1</p>
<p>Option 2</p>
<p>Option 3</p>
<p>Option 4</p>
<p>Option 5</p>

<p><input type="submit" onclick="auswahl();" value="Back zur Auswahl"/></p>

代码，Javascript： 

//wenn jemand auf den Button klickt um die Abfrage zu starten
function abfrage()
{
$("#trainercontent").load('trainerAbfrage.php');
}

//wenn jemand auf den Button klickt um zur Auswahl zurück zu kommen
function auswahl()
{
$("#trainercontent").load("trainerAuswahl.php");
}
4

1 回答 1

1 
return false;

in your js functions to prevent the submit action to be executed. By example:

function abfrage()
{
$("#trainercontent").load('trainerAbfrage.php');
 return false; 
}
于 2013-05-18T13:19:59.350 回答