我有一个显示一堆订单的文件,每个订单都有一个带有 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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b0bcbda7b2b0a7bc93bdbcb7bca1bcb9bcfdb0bcbe" rel="noreferrer noopener nofollow">[email protected]</a>" 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);
最佳答案
而不是 -
$("#contactForm4081").submit(函数(事件){
//取消表单提交
event.preventDefault();
提交表格4081();
});
试试这个 -
$(document).on("submit","#contactForm4081",function(event){
event.preventDefault();
submitForm4081();
});
关于javascript - 当其他 AJAX 函数已执行时,第二个 AJAX 函数失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57067781/