我有一组三个组合框(下拉菜单),它们由 PHP 使用数据库中的值填充。我通过将回显的“提交”按钮更改为 type='submit'
并加载 php 页面本身来测试这些组合框。他们以这种方式顺利工作。
但是,当我加载Ajax页面时,提交按钮拒绝触发Ajax功能。我通过使用 html 创建一组静态组合框来测试该页面,在本例中,Ajax 可以顺利启动。然而,使用 PHP 创建的组合框不会触发 Ajax。
我希望有人能够阐明我的代码的问题所在。
HTML 和 jQuery:
<div id="gallery_container">
<ul class="new_arrivals_gallery"></ul>
<div class="pagination"></div>
</div>
<script type="text/javascript" src="js/libs/jquery-1.6.1.min.js"></script>
<script>
$(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(虽然我不相信问题出在这里):
我只显示一个组合框以节省空间,因为它们都是相同的
// 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 "<form name='refine' action=''>
<fieldset><legend>Refine Results</legend>";
// imgFamily combo box
if($imgFamily_result = mysql_query($imgFamily_query)) {
if($imgFamily_success = mysql_num_rows($imgFamily_result) > 0) {
// Start combo-box
echo "<label for='imgFamily' id='imgFamily_label'>Choose a family</label>\n
<select class='filter' id='imgFamily' name='imgFamily'>\n
<option value='1'></option>\n";
// For each item in the results...
while ($imgFamily_row = mysql_fetch_array($imgFamily_result))
// Add a new option to the combo-box
echo "<option value='$imgFamily_row[imgFamily]'>$imgFamily_row[imgFamily]</option>\n";
// End the combo-box
echo "</select>\n";
} else { echo "No results found."; }
} else { echo "Failed to connect to database."; }
// Add a submit button to the form
echo "</fieldset>
<fieldset><input type='button' name='submit' value='submit' id='submit'></fieldset>
</form>";
非常感谢您的帮助。
最佳答案
这就是正在发生的事情(基本上是对 @GolezTrol 所说内容的重申):
- 您的页面已完成加载
- loadData(1) 已执行,但由于它是异步调用,因此在获取表单元素之前会继续执行。
- jquery 执行了
$('.filter').keypress(function(e)
但还没有该类的元素,因此不会发生绑定(bind)。 $("#submit").click(function(){
也有同样的命运,我们还没有带有submit
id 的元素。- 对 ajax 调用的响应到达,
success
函数将表单元素添加到gallery_container
,但没有绑定(bind)。
你需要做的是当各个元素被添加到dom中时调用事件绑定(bind)函数;所以你应该将它们移到 $("#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
});
关于php - Ajax PHP 创建的表单未提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7217544/