Question

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

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

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

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

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

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

我在尝试什么：

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

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

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

会发生什么：

没什么，...就像我猜的提交功能一样，只是一个页面重载。 div内容没有改变。

造成这种意外行为的原因是什么？

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

是什么让这更令人意想不到？

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

我尝试调试的内容：

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

代码，主页：

<!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>

Code，Trainerpage：

<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");
}

Answer 1

return false;

在你的js函数中阻止执行提交操作。例如：

function abfrage()
{
$("#trainercontent").load('trainerAbfrage.php');
 return false; 
}

HTML5 - Ajax - 我不明白的意外行为

1 个答案: