test1.php を選択すると、値 onchange="showbookings(this.value) が test2.php に渡され、mysql 呼び出しから HTML コードが返されます。これらはすべて完全に機能します。
私が抱えている問題は、クラス関数 contactus と status_button が email.js でまったく機能しないことです。contactus をクリックしても...何も起こりません。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>
email.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();
}