Ajax PHP创建的表单未提交

我有一组三个combobox（下拉列表），由PHP填充数据库中的值。 我已经通过将回显的Submit按钮更改为type='submit'并加载php页面本身来测试这些combobox。 他们以这种方式毫无障碍地工作。

但是，当我加载Ajax页面时，提交按钮拒绝触发Ajaxfunction。 我已经通过创建一组带有html的静态combobox来测试页面，在这种情况下，Ajax会毫不费力地触发。 然而，使用PHP创建的combobox不会触发Ajax。

我希望有人可以解释一下我的代码问题是什么。

HTML和jQuery：

 
 
 
 
   $(document).ready(function() { function loadData(imgFamily, imgClass, imgGender){ $.ajax ({ type: "GET", url: "filter_test.php", data: {imgFamily:imgFamily, imgClass:imgClass, imgGender:imgGender}, success: function(data) { $("#gallery_container").html(data); }, }); } loadData(1); // For first time page load default results //Bind keypress event to Ajax call $('.filter').keypress(function(e) { if(e.keyCode == 13) { var imgFamily = $('#imgFamily').attr('value'); var imgClass = $('#imgClass').attr('value'); var imgGender = $('#imgGender').attr('value'); //Fetch the images loadData(imgFamily, imgClass, imgGender); } }); //Bind the click event to Ajax call on submit $("#submit").click(function(){ var imgFamily = $('#imgFamily').attr('value'); var imgClass = $('#imgClass').attr('value'); var imgGender = $('#imgGender').attr('value'); //Fetch the images loadData(imgFamily, imgClass, imgGender); }) }); 

PHP（虽然我不相信这里的问题）：

我只显示一个combobox来节省空间，因为它们都是一样的

 // Queries for combo boxes $imgFamily_query = "SELECT DISTINCT imgFamily FROM images WHERE $clause"; $imgClass_query = "SELECT DISTINCT imgClass FROM images WHERE $clause"; $imgGender_query = "SELECT DISTINCT imgGender FROM images WHERE $clause"; // Create the form and combo boxes echo "
 
Refine Results
"; // imgFamily combo box if($imgFamily_result = mysql_query($imgFamily_query)) { if($imgFamily_success = mysql_num_rows($imgFamily_result) > 0) { // Start combo-box echo "Choose a family\n \n \n"; // For each item in the results... while ($imgFamily_row = mysql_fetch_array($imgFamily_result)) // Add a new option to the combo-box echo "$imgFamily_row[imgFamily]\n"; // End the combo-box echo "\n"; } else { echo "No results found."; } } else { echo "Failed to connect to database."; } // Add a submit button to the form echo "
 
 
"; 

非常感谢您的帮助。

Answer 1

您插入表单，从而覆盖提交事件绑定到的元素。 插入新表单后，应重新执行绑定事件的代码。

更简洁的方法是返回一个只包含修改过的信息的JSON对象或XML，并更新当前的表单而不是插入一个全新的表单，但这样做会更有效。

 function loadData(imgFamily, imgClass, imgGender){ $.ajax ({ type: "GET", url: "filter_test.php", data: {imgFamily:imgFamily, imgClass:imgClass, imgGender:imgGender}, success: function(data) { $("#gallery_container").html(data); bindEvents(); // <---- Call it here }, }); } // Separate function function bindEvents() { //Bind keypress event to Ajax call $('.filter').keypress(function(e) { if(e.keyCode == 13) { var imgFamily = $('#imgFamily').attr('value'); var imgClass = $('#imgClass').attr('value'); var imgGender = $('#imgGender').attr('value'); //Fetch the images loadData(imgFamily, imgClass, imgGender); } }); //Bind the click event to Ajax call on submit $("#submit").click(function(){ var imgFamily = $('#imgFamily').attr('value'); var imgClass = $('#imgClass').attr('value'); var imgGender = $('#imgGender').attr('value'); //Fetch the images loadData(imgFamily, imgClass, imgGender); }) } $(document).ready(function() { loadData(1); // For first time page load default results bindEvents(); // <---- And here (where your code originally was). }); 

Answer 2

这就是发生的事情（基本上是@GolezTrol所说的重新陈述）：

1. 您的页面完成加载
2. 执行loadData（1），但因为它是异步调用，所以在获取表单元素之前继续执行。
3. jquery执行了$('.filter').keypress(function(e)但是没有该类的元素，因此不会发生绑定。
4. $("#submit").click(function(){具有相同的命运，我们还没有submit id的元素。
5. 响应ajax调用到达， success函数将表单元素添加到gallery_container ，但没有绑定。

您需要做的是在将相应元素添加到dom时调用事件绑定函数; 所以你应该把它们移到$("#gallery_container").html(data); ：

 $(document).ready(function() { function loadData(imgFamily, imgClass, imgGender){ $.ajax ({ type: "GET", url: "filter_test.php", data: {imgFamily:imgFamily, imgClass:imgClass, imgGender:imgGender}, success: function(data) { $("#gallery_container").html(data); //Bind keypress event to Ajax call $('.filter').keypress(function(e) { if(e.keyCode == 13) { var imgFamily = $('#imgFamily').attr('value'); var imgClass = $('#imgClass').attr('value'); var imgGender = $('#imgGender').attr('value'); //Fetch the images loadData(imgFamily, imgClass, imgGender); } }); //Bind the click event to Ajax call on submit $("#submit").click(function(){ var imgFamily = $('#imgFamily').attr('value'); var imgClass = $('#imgClass').attr('value'); var imgGender = $('#imgGender').attr('value'); //Fetch the images loadData(imgFamily, imgClass, imgGender); }); } }); } loadData(1); // For first time page load default results });