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>

jQuery.html()没有';无法识别类名

对于用AJAX加载的元素(页面加载完成后),您需要使用live方法:http://api.jquery.com/live/

所以你应该改变:

$(".ActivateItem").click(function(){...})

$(".ActivateItem").live('click', function(){...});

我看到两个问题。首先,loadItems函数仅在文档就绪函数的匿名范围内可用。应该将它移到更有用的范围内,因为您似乎打算使用它来实现分页。

您当前找不到基于类的选择器的任何内容,因为选择器在调用成功回调之前正在查找元素,因此尚未生成任何元素。您可以将执行移动到成功回调中,也可以使用与jQuery动态兼容的事件绑定。

由于$().live已被弃用,因此对于需要事件连接的动态创建的元素,您应该使用$().on,除非您使用的是jQuery的遗留版本。