Javascript jquery（ajax）单击可使php脚本运行多次

我有一个按钮，当点击时，它呈现（在ajax的帮助下）php脚本的内容（基本上是一个联系人表单）。我的问题是，当单击按钮时，会调用php脚本两次或更多次。我尝试过很多解决方案，但都不管用

HTML

运行包含HTML和JS的页面时得到的响应：

php通过ajax接收发送的数据（来自index.php——包含上述代码的页面），然后将新联系人发送给另一个php脚本（这是一个类），后者将新联系人存储在数据库中，并返回（给contact.php）响应

contact.php

<form id="form">
    <div class="form-group col-xs-12 col-md-4">
        <input type="text" class="form-control" id="nume" value="<?php echo Escape::esc($nume);?>" style="pointer-events:none;background:#EFEFEF;"/>
    </div>
    <div class="col-xs-12"></div>
    <div class="form-group col-xs-12 col-md-4">
        <input type="text" class="form-control" id="prenume" value="<?php echo Escape::esc($prenume);?>" style="pointer-events:none;background:#EFEFEF;"/>
    </div>
    <div class="col-xs-12"></div>
    <div class="form-group col-xs-12 col-md-10">
        <textarea class="form-control" id="mesaj" rows="20" data-toggle="mesaj" data-placement="bottom" title="Va rog introduceti mesajul dvs."></textarea>
    </div>
    <div class="col-xs-12"></div>
    <div style="clear:both"></div>
    <button class="btn btn-default" onclick="return validate();" style="margin-left:15px;">TRIMITE</button>
</form>
<script type="text/javascript">
function validate(){
    var nume    = $('#nume').val();
    var prenume = $('#prenume').val();
    var mesaj   = $('#mesaj').val().trim();

    if (mesaj == '' || mesaj.length < 3){
        $(function(){
            $('[data-toggle="mesaj"]').tooltip();
            document.getElementById('mesaj').focus();
        });
        return false;
    }
    $('#form').off();// here I tried to unbind all the previous submit events too
    $('#form').on('submit',function(e){
        $.ajax({
            type: "POST",
            url: "../../app/classes/Contact.php",
            data: {nume:nume, prenume:prenume, mesaj:mesaj},
            success: function(html){
                $('#content').html(html);
            }
        });
        e.preventDefault();
    });
}
</script>

据我所知，JavaScript本质上不按顺序执行函数。在您的第一个jQuery代码片段中，您的代码似乎假定它将首先解除绑定到
$（“#contact'）
的所有事件的绑定，然后创建一个新绑定，但这不一定是真的

另外，
off（）
命令仅在使用相应的
on（）
命令将事件绑定到元素时有效，但代码使用
click（）
而不是
on（）

您可能想尝试以下方法：

$(document).ready(function(){
      $('#contact').on('click', function(e){
        $.ajax({
            type: "POST",
            url: "contact.php",
            success: function(html){
                $('#content').html(html);
            }
        });
        e.preventDefault();
    });
});

使用
$（'#contact'）.on（'click'，函数（e）.
将允许您在
e.preventDefault（）；
之后调用
$（'#contact'）.off（）

我不确定这是否能解决您的问题，但希望这是朝着正确方向迈出的一步。
因此，第一个ajax将打印表单，第二个ajax处理表单提交，第二个ajax处理您的问题……对吗？我想这是第一个问题。当我在导航栏中按CONTACT时，会调用第二个。用户填写conta后会调用第二个ajaxct form并按下Send按钮。您是否可以尝试将联系人id更改为其他内容，以便在index.php中实现contact.php中的JavaScript，并仅呈现HTML部分，当用户单击“contact”@jahler时，结果是相同的。请提供其他提示？
<form id="form">
    <div class="form-group col-xs-12 col-md-4">
        <input type="text" class="form-control" id="nume" value="<?php echo Escape::esc($nume);?>" style="pointer-events:none;background:#EFEFEF;"/>
    </div>
    <div class="col-xs-12"></div>
    <div class="form-group col-xs-12 col-md-4">
        <input type="text" class="form-control" id="prenume" value="<?php echo Escape::esc($prenume);?>" style="pointer-events:none;background:#EFEFEF;"/>
    </div>
    <div class="col-xs-12"></div>
    <div class="form-group col-xs-12 col-md-10">
        <textarea class="form-control" id="mesaj" rows="20" data-toggle="mesaj" data-placement="bottom" title="Va rog introduceti mesajul dvs."></textarea>
    </div>
    <div class="col-xs-12"></div>
    <div style="clear:both"></div>
    <button class="btn btn-default" onclick="return validate();" style="margin-left:15px;">TRIMITE</button>
</form>
<script type="text/javascript">
function validate(){
    var nume    = $('#nume').val();
    var prenume = $('#prenume').val();
    var mesaj   = $('#mesaj').val().trim();

    if (mesaj == '' || mesaj.length < 3){
        $(function(){
            $('[data-toggle="mesaj"]').tooltip();
            document.getElementById('mesaj').focus();
        });
        return false;
    }
    $('#form').off();// here I tried to unbind all the previous submit events too
    $('#form').on('submit',function(e){
        $.ajax({
            type: "POST",
            url: "../../app/classes/Contact.php",
            data: {nume:nume, prenume:prenume, mesaj:mesaj},
            success: function(html){
                $('#content').html(html);
            }
        });
        e.preventDefault();
    });
}
</script>

$(document).ready(function(){
      $('#contact').on('click', function(e){
        $.ajax({
            type: "POST",
            url: "contact.php",
            success: function(html){
                $('#content').html(html);
            }
        });
        e.preventDefault();
    });
});