Question

Before I added loadItems function, $(".ActivateItem").click(function () {...}): works fine. But when I made jquery code to load items on a table, class name (for I think) is not recognized.

<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>  

The $(“.ActivateItem”) is not working, what did I missed?
Hope someone could help, or if you have better solution, please share. Thanks!

By the way, this was the old code where $(".ActivateItem") works fine:

<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="[e-mail]">
            <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

For elements loaded with AJAX (after the page has completed loaded), you need to use the method live: http://api.jquery.com/live/

So you should change:

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

to

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