4

如果标题有点不清楚，我很抱歉。基本上，这就是问题所在：我有一个在名为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 获取的。注意：如上面的 javascript 代码中所述，存在一个加载表单的 DIV 容器。index.php它被命名为“pollContainer”。

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

现在，我们的目标是让它的工作方式与我直接访问 poll.php 时的工作方式相同，而是让 ajax 在容器内工作并更新 div 内容，就像它在poll.php.

然而，问题是每当我点击“提交”时，不仅页面只是刷新而没有做任何其他事情，而且它也无法计算投票并运行“vote.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投票时可以完美运行，但在以index.php.

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

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

4

1 回答 1

1

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

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

于 2013-10-10T22:27:20.613 回答