php – Ajax投票调查直接工作,但不是通过第二次ajax调用

如果标题有点不清楚,我道歉.基本上,问题在于：我有一个投票民意调查表格,该表格在一个名为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工作并以poll.PHP中的方式更新div内容.

然而,问题在于,每当我点击“提交”时,不仅页面只是刷新而且什么也不做,但它也没有考虑到投票并运行“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中显示的形式进行时却无效.

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

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

解决方法

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

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