Question

如果标题有点不清楚，我道歉。基本上，问题在于：我有一个投票民意调查表格，该表格在名为poll.php的文件中生成。所以，如果我去/poll.php，它会告诉我民意调查。我不包括表单代码，因为它没有任何可能导致此问题的东西，因为它只有单选按钮，文本和提交按钮。我已将表单配置为使用ajax，因此当我单击“提交”时，它会提交表单，在数据库中查询最新数据并以图表形式将其显示给用户而不刷新页面。

以下是为启用ajax而运行的javascript代码：

$('body').on('submit', '#votePoll', function() {
    $.get("/vote.php", $(this).serialize(), function(data) {
        $("#content").html(data);
    });
    return false;
});

如代码所示，表单的id设置为“votePoll”。正如我之前所说，如果我只是去poll.php，选择一个单选按钮并点击提交，它将执行上面的代码并正常工作。当插入第二个ajax阶段时会出现问题。

显示网页的主文件名为index.php。

在index.php中，我运行以下javascript代码来获取poll.php中创建的表单并显示它：

$(function() {
    var pollContainer = document.getElementById('pollContainer');

    $.ajax({
        url:"/poll.php",
        type:"POST",
        success:function(msg){
            pollContainer.innerHTML = msg;
        }
    });
})

如您所见，表单也是通过ajax获取的。 注意：index.php中存在一个DIV容器，其中加载了表单，如上面的javascript代码中所述。它被命名为“pollContainer。”

接下来，当代码执行时，表单（可以在poll.php中看到）显示在index.php内的div容器中。

现在，我的目标是使其工作方式与我直接使用poll.php时的工作方式相同，但是在容器内部使用ajax工作并以{{1}中的方式更新div内容}}

然而，问题在于，每当我点击“提交”时，不仅页面只是刷新而不做其他任何事情，而且它也无法考虑投票并运行“vote.php”。

以下是生成表单的poll.php文件的一部分（显示在poll.php中的div容器中）：

index.php

该文件中的其余代码和变量print "<div id='content'> <form method='post' id='votePoll'> <span><b> {$qTitle} </b></span><br> <div class='radio'> <label> <input type='radio' name='option' id='optionsRadios1' value='1'> {$q1} </label> </div> <div class='radio'> <label> <input type='radio' name='option' id='optionsRadios1' value='2'> {$q2} </label> </div> <div class='radio'> <label> <input type='radio' name='option' id='optionsRadios1' value='3'> {$q3} </label> </div> <input type='submit' class='btn btn-default'> </form> </div>";等不包含在此代码中，但他们的工作是从数据库中检索信息并显示它。

让我感到困惑的是，为什么代码在直接转到q1并投票时效果很好，但在以poll.php中显示的形式执行时却无效。

如果我犯了一些错误或忘记添加内容，请告诉我。

更新：上面发布的两个JS代码块都位于index.php页面内引用的单独文件中。

Answer 1

我想问题是$(function() {...});调用，这实际上是$(document).ready(function() {...});的快捷方式。当您使用Ajax调用更改DOM时，文档就绪事件未被触发，因此您的事件处理程序不会被绑定。

使用Event Delegation，您可以在index.php中尝试$('body').on('submit', '#votePoll', function() {...});，而不是poll.php中的事件处理程序。这应该将您的事件处理程序绑定到正文中所有当前和未来的#votePoll元素。

Ajax投票调查直接工作，但不通过第二次ajax调用

1 个答案: