php - Ajax 投票民意调查直接工作，但不是通过第二个 ajax 调用

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 在容器内工作并按照在 中的方式更新 div 内容poll.php.

但是，问题是每当我单击“提交”时，页面不仅会刷新而不执行任何其他操作，而且它也无法计算投票并运行“vote.php”。

下面是生成表单的poll.php文件的一部分(显示在index.php的div容器中):

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 和投票时可以完美运行，但在以 index.php 中显示的形式进行投票时却不起作用。 php.

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

更新:上面发布的两个 JS 代码块都在单独的文件中，这些文件在 index.php 页面中被引用。

Answer 1

我猜问题是 $(function() {...}); 调用，它本质上是 $(document).ready(function() { ...});。当您使用 Ajax 调用更改 DOM 时，不会触发文档就绪事件，因此您的事件处理程序不会绑定(bind)。

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