javascript - 如何使用 Ajax 在表单提交时加载一个接一个的 div

Question

基本上，我需要向用户询问有关在 iframe 中显示的网站的三个问题。

我在 iframe 上方有一个简单的 html 表单，它将提交用户对要处理的 processor.php 的回答。

在第一个问题之后，我需要再加载两个，一个接一个，但要以 iframe 保持完整的方式进行，因此不能刷新整个页面。

这是我目前所拥有的:

形式:

<form id="myForm" action="" method="post">
    <span id="surveyQuestion">Question 1</span><br/>
    <input type="hidden" name="firstQuestion" value="Question 1">
    <span class="info">0</span>
    <input type="radio" class="radioButton" name="response" value="0">
    <input type="radio" class="radioButton" name="response" value="1">
    <input type="radio" class="radioButton" name="response" value="2">
    <input type="radio" class="radioButton" name="response" value="3">
    <input type="radio" class="radioButton" name="response" value="4">
    <input type="radio" class="radioButton" name="response" value="5">
    <span class="info">5</span>
</form>

jQuery:

$(function () {
    $("input.radioButton").change(function(){
        $.ajax({
            type: 'post',
            url: 'processor.php',
            data: $('#myForm').serialize(),
            success: function () {
                $("#surveyBox").load("question2.php #secondQuestion > *");
            }
        });
    });
});

我正在使用 $("#surveyBox").load("question2.php #secondQuestion > *"); 加载 question2.php，其中有一个 ID 为 secondQuestion 的 div，看起来像这个:

<div id="secondQuestion">
<script type='text/javascript'>
$(function () {
    $("input.radioButton").change(function(){
        $.ajax({
            type: 'post',
            url: 'processor.php',
            data: $('#myForm').serialize(),
            success: function () {
            alert('Done');
            }
        });
    });
});
</script>
<form id="myForm" action="" method="post">
    <span id="surveyQuestion">Question 2</span><br/>
    <input type="hidden" name="secondQuestion" value="Question 2">
    <span class="info">0</span>
    <input type="radio" class="radioButton" name="response" value="0">
    <input type="radio" class="radioButton" name="response" value="1">
    <input type="radio" class="radioButton" name="response" value="2">
    <input type="radio" class="radioButton" name="response" value="3">
    <input type="radio" class="radioButton" name="response" value="4">
    <input type="radio" class="radioButton" name="response" value="5">
    <span class="info">5</span>
</form>
</div>

问题是，当我执行此操作时，新加载的 div 中的 submit 功能不再起作用。我没有收到“完成”警告框形式的确认。

我阅读了有关 .on() 函数的内容，但我觉得现在有点难以理解？？？

我还必须问:这甚至是一个明智的想法，还是我可以将问题完全放在另一个地方并以其他方式一个接一个地调用它们？因为现在我需要在第二次之后加载 question3.php 等等......

Answer 1

您有两个选择 - 使用您提到的“.on”或隐藏在其他答案中提到的。

使用.on()

$("#surveyBox").on("submit", "#firstQuestion form", function(){
    //form1 ajax
});
$("#surveyBox").on("submit", "#secondQuestion", function(){
    //form2 ajax
});
$("#surveyBox").on("submit", "#thirdQuestion", function(){
    //form3 ajax
});

隐藏表单

用html-

<div id="firstQuestion">
    //first form
</div>
<div id="secondForm">
    //second form
</div>
<div id="thirdForm">
    //third form
</div>

将以下内容添加到 jQuery 函数的顶部 -

$("#secondForm").hide();
$("#thirdForm").hide();

然后在每个 ajax 调用的成功函数中，您可以隐藏提交的表单并显示下一个表单。即

$("#firstForm").hide();
$("#secondForm").show();