0
當我在test1.php上做出選擇時，它將onchange =「showbookings（this.value）的值傳遞給test2.php，然後返回從mysql調用中填充的html代碼。所有這一切都很完美ajax不允許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運行並返回以下HTML從MySQL填寫回
<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='[email protected]'>
</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();
}
adear11 - 感謝您的回覆。如何以及在哪裏重新附加點擊事件偵聽器？你寫道：「在ajax調用後...將點擊事件綁定到任何新的.status_button元素。」在ajax調用之前沒有.status_button元素，所以它們都是新的。任何建議將不勝感激。謝謝，Kurt – stapuff
你應該在你的'onreadystatechange'函數中完成它，在你賦值innerHTML之後 – adear11
你有腳本例子嗎？謝謝，Kurt – stapuff