javascript - 当其他 AJAX 函数已经执行时，第二个 AJAX 函数失败

Question

我有一个显示一堆订单的文件，每个订单都有一个带有发送电子邮件的 ajax 功能的按钮。除此之外，每 30 秒另一个 ajax 函数运行并搜索新订单并将它们加载到顶部。当我第一次加载页面时，发送邮件功能工作正常。但是一旦第一次执行搜索新订单的功能，当我单击触发邮件 ajax 功能的按钮时，它不会发送它并重新加载页面

我检查了可能冲突的重复变量和函数名称，但没有。这些函数自己工作得很好，只有当订单搜索一个已经执行时，另一个开始失败

这是每个表单的简化html代码(页面上有很多不同id的订单)

<form role="form" id="contactForm4081">
    <div class="form-group fg4081">
        <label for="message" class="h4 ">Tiempo de entrega</label>
        <!--  <textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea> -->
        <input type="hidden" value="Santiago" name="name4081" id="name4081" />
        <input type="hidden" value="contacto@nodorojo.com" name="email4081" id="email4081" />
        <select name="message4081" id="message4081" required>
            <option value="15">15 min</option>
            <option value="30">30 min</option>
            <option value="45">45 min</option>
            <option value="60">60 min</option>
        </select>
        <button type="submit" id="form-submit" class="btn btn-default btn-md pull-right ">Enviar mail</button>
    </div>

    <div id="msgSubmit4081" class="h4 text-center hidden">Tiempo de entrega enviado.</div>
</form>

这是邮件功能

$("#contactForm4081").submit(function(event){
    // cancels the form submission
    event.preventDefault();
    submitForm4081();
});
  function submitForm4081(){
    // Initiate Variables With Form Content
    var name4081 = $("#name4081").val();
    var email4081 = $("#email4081").val();
    var message4081 = $("#message4081").val();
 
    $.ajax({
        type: "POST",
        url: "php/process.php",
        data: "name=" + name4081 + "&email=" + email4081 + "&message=" + message4081,
        success : function(text){
            if (text == "success"){
                formSuccess4081();
            }
        }
    });
}
function formSuccess4081(){
    $( "#msgSubmit4081" ).removeClass( "hidden" );
    $( ".fg4081" ).addClass( "hidden" );
}

这是寻找新订单的函数

var ultimoid = 4081;
var xultimoid = "";

  function nuevospedidos() {
     var xhttp = new XMLHttpRequest();
xhttp.open("POST", "cosito3.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     var response = JSON.parse(this.responseText);
     console.log(response);
    var element = document.querySelector('#contenidogral');
    var content = element.innerHTML;
    ultimoid = response.ultimoid;
    element.innerHTML = response.contenido + content;
    }
  };
  xhttp.send("ultimoid="+encodeURIComponent(ultimoid));

  }
setInterval( nuevospedidos, 30000);

Answer 1

而不是 -

$("#contactForm4081").submit(函数(事件){
//取消表单提交
事件.preventDefault();
submitForm4081();
});

试试这个 -

 $(document).on("submit","#contactForm4081",function(event){
    event.preventDefault();
    submitForm4081();
});