我的页面上有一个表单，应该使用AJAX来保存数据并将数据加载到文件中。
这是我正在使用的java脚本：
$(document).ready(function(){
$("#saveConfigForm").submit(function (e)
{
e.preventDefault();
var formData = $(this).serialize();
alert(formData);
});
$(".configFile").click(function() {
if (this.text == '' && this.text == 'undefined')
{
return;
}
$.get( "showForm.php", { loadConfig: this.text} )
.done(function( data ) {
$('#configFormContainer').html(data);
});
});
第二个函数中的类.configFile引用了一个标签列表。当我单击其中的脚本时，脚本会成功加载文件中的内容并显示它。这是上面提到的a-Tags的html：
<div class="list-group">
<a href="#" class="configFile>config.json</a>
<a href="#" class="configFile>config_1504987517.json</a>
</div>
这部分工作正常：触发了javascript函数。在showForm.php中加载配置文件。它正在使用文件中的内容重新构建完整的表单。
什么不能正常工作是提交功能的触发器。这是form-html
<form id="saveConfigForm" method="POST">
<a bunch of form elements />
<button name="submit" class="btn btn-success" type="submit" id="saveConfig">Speichern</button>
</form>
所以，现在发生了什么：
当我最初加载页面时，我单击提交按钮并获取警报。此触发器.submit（）正在运行。
当我单击其中一个a-tag以加载配置文件时，正在加载该文件而不刷新页面。这个触发器.click（）也正常工作。
在之后：当我点击提交按钮时，正在重新加载页面。触发器.submit（）不起作用。
此后＆＃34;不想要的＆＃34;重新加载页面，.submit（） - 触发器再次正常工作。
我不知道这里有什么问题。希望有人可以提供帮助
欢呼声
答案 0 :(得分：1)
虽然这不是你的整个代码集，但我拿了你发布的内容并制作了一个页面。我可以点击.configFile链接中的任意一个，然后点击提交按钮，我就会收到提醒。
但我确实关闭class元素的.configFile个"个属性<html>
<body>
<div class="list-group">
<a href="#" class="configFile">config.json</a> <!-- //added " to end of class attribute -->
<a href="#" class="configFile">config_1504987517.json</a> <!--//added " to end of class attribute -->
</div>
<form id="saveConfigForm" method="POST">
<a bunch of form elements />
<button name="submit" class="btn btn-success" type="submit" id="saveConfig">Speichern</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#saveConfigForm").submit(function (e)
{
e.preventDefault();
var formData = $(this).serialize();
alert(formData);
});
$(".configFile").click(function() {
if (this.text == '' && this.text == 'undefined')
{
return;
}
if (window.XMLHttpRequest)
{
// AJAX for IE7+, Chrome, Firefox, Safari, Opera
xmlhttp = new XMLHttpRequest();
} else {
// AJAX for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
$('#configFormContainer').html(xmlhttp.responseText);
}
}
xmlhttp.open("GET","showForm.php?loadConfig=" + this.text, true);
xmlhttp.send();
});
});
</script>
</body>
</html>
。我不知道这是否有区别。但是，如果它不是，那么在ajax请求之后发生了一些事情，当然我无法使用此代码进行模拟。
$("#saveConfigForm").submit(function (e)
{
e.preventDefault();
var formData = $(this).serialize();
alert(formData);
});
另一件让我感到好奇的事：打开浏览器的开发者控制台并再次粘贴你的提交活页夹：
$(document).on('submit', '#saveConfigForm', (e) => {
e.preventDefault();
var formData = $(this).serialize();
alert(formData);
});
如果您的提交在此之后有效，我建议在呈现新的html后再次绑定click事件。或者，将事件绑定到$（文档），如：
execvp作为最后一点，我不会尝试增加您的代码，以帮助解决您遇到的具体问题。正如另一位用户评论的那样，使用jQuery函数会更加清晰，因为您使用的是jQuery。但是我不会将此作为你问题的一部分。
答案 1 :(得分：1)
我发现了导致问题的原因：ajax-call返回html-form并将其放到表单容器中。
在此之后，该表单的触发器消失了，因为触发器已连接到表单，我用ajax-data覆盖了该表单。
当我重置这样的触发器时它会起作用。但这看起来更像是快速的“肮脏”
$(document).ready(function(){
$("#saveConfigForm").submit(function (e)
{
e.preventDefault();
var formData = $(this).serialize();
alert(formData);
});
$(".configFile").click(function() {
if (this.text == '' && this.text == 'undefined')
{
return;
}
$.get( "showForm.php", { loadConfig: this.text} )
.done(function(data) {
$('#configFormContainer').html(data);
// re-init the trigger on "submit" here
// ------------------------------------
$("#saveConfigForm").submit(function (e)
{
e.preventDefault();
var formData = $(this).serialize();
alert(formData);
});
});
});
}）;
我需要调整showForm.php。如果从ajax方法调用它，它将只返回表单元素，而不是表单本身。 如果从头开始调用它，它将返回完整的表单。
此外，java脚本现在替换了form元素的内容，而不是它的容器。这样触发器就不会丢失。
$(document).ready(function(){
$("#saveConfigForm").submit(function (e)
{
e.preventDefault();
var formData = $(this).serialize();
alert(formData);
});
$(".configFile").click(function() {
if (this.text == '' && this.text == 'undefined')
{
return;
}
$.get( "showForm.php", { loadConfig: this.text} )
.done(function(data) {
$('#saveConfigForm').html(data);
});
});
});
为了完整起见，这是showForm.php的主要部分：
<?php
if (!isset($_GET['loadConfig']))
{
// do not return the complete form to prevent losing the trigger on it
echo '<form id="saveConfigForm" method="POST">';
}
echo '<a bunch of form elements />';
if (!isset($_GET['loadConfig']))
{
echo '</form>';
}