Question

在我添加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>

$（＆＃34; .ActivateItem＆＃34;）无效，我错过了什么？
希望有人可以提供帮助，或者如果你有更好的解决方案，请分享。谢谢！

顺便说一句，这是$(".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>

Answer 1

对于使用AJAX加载的元素（在页面加载完成后），您需要使用实时方法：http://api.jquery.com/live/

所以你应该改变：

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

到

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

Answer 2

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

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

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

jQuery.html（）无法识别类名

2 个答案: