当我在 test1.php 上进行选择时，它会将值 onchange="showbookings(this.value) 传递给 test2.php，然后从 mysql 调用返回填充的 html 代码。所有这些都很完美。
我遇到的问题是类函数contactus 和status_button 在email.js 中根本不起作用。当我点击联系我们时......没有任何反应。当我单击 status_button 时，页面刷新回未选中的框。我正在寻找有关在做出选择并呈现 html 后如何让类函数工作的建议。
我有在另一个示例中工作的函数，而没有选择呈现 html，所以我知道它们可以工作。我只是不明白为什么他们不再使用选择。
<a id='email1' href='#' class='contactus'><img src='emailbutton.jpg' title='Email' border='0' height='24' width='24'></img></a>
<div id='messageA1'><a id='1' href='' class='status_button' title='C1'><div id='messageB1'><img src='closebutton.jpg' title='Order Status' border='0' height='24' width='24'></img></div></a></div>
test1.php
<?php
include('connection.php');
echo '<html>
<head>
<link rel="stylesheet" href="booking.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="email.js"></script>
</head>
<body>
<a href=""><img src="/images/logo.png" height="123" width="298"></a>
<br/>
<form style="width: 1100px">
<select name="bookings" onchange="showbookings(this.value)">
<option value="">Select Bookings To See:</option>
<option value="1">All Booking</option>
<option value="2">Open Bookings</option>
<option value="3">Closed Bookings</option>
</select>
</form>
<div id="txtBookings"></div>
</body>
</html>';
?>
运行test2.php，返回下面从mysql填写的html返回到
<div id="txtBookings"></div>
在 test1.php
<form id='form1' style='width: 1100px'>
<table>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Adults</th>
<th>Kids</th>
<th>Pets</th>
<tr>
<td>
<input type='text' id='id1' size='3' readonly='readonly' value='1'>
</td>
<td>
<input type='text' id='fname1' size='8' value='Bob'>
</td>
<td>
<input type='text' id='lname1' size='13' value='Smith'>
</td>
<td>
<input type='text' id='email1' size='25' value='bobsmith@yahoo.com'>
</td>
<td>
<input type='text' id='phone1' size='10' value='(555)-555-5555'>
</td>
<td>
<input type='text' id='addy1' size='22' value='123 Main St'>
</td>
<td>
<input type='text' id='city1' size='10' value='Anywhere'>
</td>
<td>
<input type='text' id='state1' size='1' value='CA'>
</td>
<td>
<input type='text' id='zip1' size='2' value='99999'>
</td>
<td>
<input type='text' id='adults1' size='2' value='2'>
</td>
<td>
<input type='text' id='kids1' size='1' value='0'>
</td>
<td>
<input type='text' id='pet1' size='1' value='0'>
</td>
</tr>
</table>
<table>
<th>Level</th>
<th>Check In</th>
<th>Check Out</th>
<th>Booked</th>
<tr>
<td>
<input type='text' id='level1' size='2' value='Upper'>
</td>
<td>
<input type='text' id='chkin1' size='7' value='11/21/2013'>
</td>
<td>
<input type='text' id='chkout1' size='7' value='11/24/2013'>
</td>
<td>
<input type='text' id='booked1' size='7' value='10/02/2013'>
</td>
<td><a id='edit1' href='' class='edit_button' title=''><img src='editbutton.jpg' title='Submit Edit' border='0' height='24' width='24'></img></a>
</td>
<td><a id='email1' href='#' class='contactus'><img src='emailbutton.jpg' title='Email' border='0' height='24' width='24'></img></a>
</td>
<td>
<div id='messageA1'><a id='1' href='' class='status_button' title='C1'><div id='messageB1'><img src='closebutton.jpg' title='Order Status' border='0' height='24' width='24'></img></div></a>
</div>
</td>
</tr>
</table>
</form>
电子邮件.js
$(document).ready(function () {
$(".contactus").click (function () {
// alert("email");
var element = $(this);
var J = element.attr("id");
var email = document.getElementById(J).value;
$("#result").html("<h3>Loading</h3>").css("display", "block");
findCenter($("#result"));
$.get("email.php?email=" + email, function (data) {
$("#result").html(data);
findCenter($("#result"));
FocusOnInput();
$("#snd").click(function () {
var subject = document.getElementById("subject").value;
var addy = document.getElementById("addy").value;
var comments = document.getElementById("comments").value;
$("#result").append("<br /><br /><div><i>Sending...</i></div>");
$.post("email.php", {
mode: "snd",
subject: subject,
addy: addy,
comments: comments
}, function (data) {
$("#result").html(data);
findCenter($("#result"));
});
});
$("#cnx").click(function () {
$.post("email.php", {
mode: "cnx"
}, function (data) {
$("#result").html(data);
findCenter($("#result"));
});
});
});
});
});
$(document).ready(function () {
$(".status_button").click (function () {
// alert("status");
var element = $(this);
var I = element.attr("id");
var id = $("#id" + I).val();
var sname = $(this).attr("title");
$.post("openclose.php", {
id: id,
sname: sname
},
function (data) {
var response = (data).split(";", 3);
$("#messageA" + I).innerhtml = (response[0]);
$("#messageA" + I).hide();
$("#messageA" + I).fadeIn(1500);
$("#messageB" + I).html(response[1]);
$("#messageB" + I).hide();
$("#messageB" + I).fadeIn(1500);
document.getElementById(I).value = (response[2]);
document.getElementById(I).title = (response[2] + I);
});
return false;
});
});
function showbookings(str) {
if (str === "") {
document.getElementById("txtBookings").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtBookings").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "test2.php?q=" + str, true);
xmlhttp.send();
}