AJAX 不允许运行 HTML 类单击函数
ajax does not allow html class click functions to run
当我在test1上进行选择时.php它将值onchange="showbookings（this.value）传递给test2.php然后从mysql调用返回填充的html代码。 所有这些都完美地工作。
我遇到的问题是类函数与我们联系，status_button不再在电子邮件.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>
测试1.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>
测试1.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();
}
像这样绑定您的点击事件处理程序，使用委托的事件处理程序，以便它们适用于动态生成的 HTML 元素：
$('body').on('click', '.status_button', function () {
// your code here
};
你拥有它的方式，（仅绑定$(".status_button").click(...)），当单击事件处理程序绑定时，元素还不存在，这就是它不起作用的原因。 委托窗体中的 on() 方法即使对于绑定处理程序时尚未创建的元素也有效。
为了获得更好的性能，还可以将其附加到绑定事件时已存在的.status_button的最接近的祖先（将'body'替换为该祖先的选择器）。
从文档（向下转到委托事件处理程序）：
提供选择器时，事件处理程序称为 委托。当事件直接发生在 绑定元素，但仅适用于 匹配选择器。jQuery 将事件从事件目标向上冒泡 到附加到处理程序的元素（即，最里面的 最外层元素），并沿该元素运行任何元素的处理程序 与选择器匹配的路径。
http://api.jquery.com/on/
加载动态内容后，您需要重新附加点击事件侦听器。仅当附加侦听器时，绑定才会对页面上已有的元素进行。侦听器不会附加到在进行on()调用后添加到 DOM 的元素。
进行 ajax 调用后，需要执行$(".status_button").on('click',function(){....});将 click 事件绑定到任何新的.status_button元素。
来自 jQuery 文档on()
事件处理程序仅绑定到当前选定的元素;在代码调用 .on（） 时，它们必须存在于页面上。
我采纳了建议并将函数添加到一起。以下是我所做的。所有功能都完全按预期工作。
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;
$(".contactus").on('click', function () {
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"));
});
});
});
});
$(".status_button").on('click', function () {
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;
});
}
};
xmlhttp.open("GET", "test2.php?q=" + str, true);
xmlhttp.send();
}
相关文章：
- 使用单击函数中的jQuery切换元素
- 单击函数仅对某些数据名称执行
- 如何创建背景图像列表'URL，并使用jQuery在单击函数时应用它们
- 调用时未输入角度 ng 单击函数
- 未捕获的引用错误:变量未在单击函数上定义
- 在 JavaScript 中单击函数时两个日期类型输入之间的差异的代码
- 通过动态创建数组名称在单击函数中引用 javascript 数组
- 单击函数生成的 jQuery 对话框中的元素
- this.offset不是单击函数中的函数
- jQuery:将tr附加到表tbody可以防止tr单击函数
- 将列表值传递给jQuery单击函数
- .nextAll函数在单击函数内部使用时将不起作用
- Javascript单击函数返回
- 在jQuery单击函数上渲染部分Rails
- jquery使用单击函数增加PHP变量
- 未从指令模板调用的单击函数
- 在另一个函数中触发单击函数
- Jquery 单击函数不适用于动态元素
- 单击函数以在组扩展后运行
- 列表中项的动态单击函数指令.快到了
