jQuery.html()没有';无法识别类名
本文关键字:识别 html 没有 jQuery | 更新日期: 2023-09-27 18:23:49
在添加loadItems
函数之前,$(".ActivateItem").click(function () {...}):
运行良好。但是,当我编写jquery代码来加载表上的项时,类名(我认为)是无法识别的。
<script type="text/javascript">
$(document).ready(function () {
loadItems(5);
function loadItems(rc) {
$.ajax({
type: "GET",
url: '@Url.Content("~/User/UserList")',
data: { take: rc },
dataType: 'json',
success: function (response) {
var tags = "<tr><th>Login id</th><th>First name</th><th>Middle name</th><th>Last name</th><th>Prefix</th><th>Suffix</th><th>Reset</th><th>Email</th><th></th></tr>";
$.each(response, function (index, item) {
tags += "<tr id=" + item.UserID + ">" +
"<td>" + item.LoginID + "</td>" +
"<td>" + item.FirstName + "</td>" +
"<td>" + item.MiddleName + "</td>" +
"<td>" + item.LastName + "</td>" +
"<td>" + item.Prefix + "</td>" +
"<td>" + item.Suffix + "</td>" +
"<td>" + item.IsReset + "</td>" +
"<td>" + item.SendEmail + "</td>" +
"<td>" +
"<a href=# class='ActivateItem' data-id = " + item.UserID + " item-data = " + item.LoginID + ">Activate</a> | " +
"<a href=/BaseAdmin/User/Details/" + item.UserID + ">Details</a></td></tr>";
alert("<a href=# class='ActivateItem' data-id = " + item.UserID + " item-data = " + item.LoginID + ">Activate</a> | ");
});
$("#table-list").html(tags);
}
});
};
$(".ActivateItem").click(function () {
var id = $(this).attr("data-id");
var display = $(this).attr("item-data");
alert("Hello");
var answer = confirm("Activate user with login id: " + display);
if (answer) {
$.post("/User/Activate", { "id": id },
function (data) {
if (data > 0) {
$("#row-" + data).fadeOut('fast');
} else {
alert("Data was not deleted successfully.");
}
});
}
});
$("#rows-count").keypress(function (e) {
if (e.keyCode == 13) {
var rowscount = $(this).val();
loadItems(rowscount);
}
});
});
</script>
<table id="table-list"></table>
<div id="pager">
Rows: <input type="text" id="rows-count" />
<input type="button" id="btn-next" value="Next"/>
<input type="button" id="btn-back" value="Back" />
</div>
$(".ActivateItem")不工作,我错过了什么
希望有人能帮忙,或者如果你有更好的解决方案,请分享。谢谢
顺便说一句,这是$(".ActivateItem")
正常工作的旧代码:
<table id="table-list">
<tr>
<th>
Login id
</th>
<th>
First name
</th>
<th>
Middle name
</th>
<th>
Last name
</th>
<th>
Prefix
</th>
<th>
Suffix
</th>
<th>
Reset
</th>
<th>
Email
</th>
<th>
</th>
</tr>
@foreach (var item in Model)
{
<tr id="row-@item.UserID">
<td>
@Html.DisplayFor(modelItem => item.LoginID)
</td>
<td>
@Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
@Html.DisplayFor(modelItem => item.MiddleName)
</td>
<td>
@Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Prefix)
</td>
<td>
@Html.DisplayFor(modelItem => item.Suffix)
</td>
<td>
@if (item.IsReset)
{ <text>YES</text>;
}
else
{ <text>NO</text>;
}
</td>
<td>
@if (item.SendEmail)
{ <text>YES</text>;
}
else
{ <text>NO</text>;
}
</td>
<td>
<a href="#" class="ActivateItem" data-id = "@item.UserID" item-data = "@item.LoginID">Activate</a> |
@Html.ActionLink("Details", "Details", new { id = item.UserID })
</td>
</tr>
}
</table>
对于用AJAX加载的元素(页面加载完成后),您需要使用live方法:http://api.jquery.com/live/
所以你应该改变:
$(".ActivateItem").click(function(){...})
至
$(".ActivateItem").live('click', function(){...});
我看到两个问题。首先,loadItems函数仅在文档就绪函数的匿名范围内可用。应该将它移到更有用的范围内,因为您似乎打算使用它来实现分页。
您当前找不到基于类的选择器的任何内容,因为选择器在调用成功回调之前正在查找元素,因此尚未生成任何元素。您可以将执行移动到成功回调中,也可以使用与jQuery动态兼容的事件绑定。
由于$().live已被弃用,因此对于需要事件连接的动态创建的元素,您应该使用$().on,除非您使用的是jQuery的遗留版本。