Find a hyperlink in a ListView nested within anothe ListView with Jquery

Question

I'm needing a solution like this one https://stackoverflow.com/a/7368719/1203098 where my link that I need to select is in a ListView that is group by inside another ListView.

The error I keep getting is an "Object reference not set to an instance of an object"

<asp:ListView ID="lstViewSharedFolder" runat="server" OnItemDataBound="lstViewSharedFolder_ItemDataBound">
    <ItemTemplate>
        <tr class="alert-info">
            <td><strong>Folder ID</strong>:
                <%# Eval( "FolderID") %>
            </td>
            <td><strong>Folder Name</strong>:
                <%# Eval( "SharedFolderName") %>
            </td>
            <td><strong>Security Score</strong>:
                <%# Eval( "Score") %>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <asp:ListView ID="lstViewUsers" runat="server" OnItemDataBound="lstViewUsers_ItemDataBound">
                    <ItemTemplate>
                        <tr>
                            <td>
                                <asp:HyperLink ID="lnkUsername" runat="server">
                                    <%# Eval( "UserName") %>
                                </asp:HyperLink>
                            </td>
                            <td>
                                <%# Eval( "ReadOnly") %>
                            </td>
                            <td>
                                <%# Eval( "Give") %>
                            </td>
                            <td>
                                <%# Eval( "CanAdminister") %>
                            </td>
                            <td>
                                <%# Eval( "GroupName") ?? "n/a" %>
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:ListView>
            </td>
        </tr>
    </ItemTemplate>
</asp:ListView>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#<%= ((HyperLink)((ListView)lstViewSharedFolder.FindControl("lstViewUsers")).FindControl("lnkUsername")).ClientID %>').click(function() {
            var id = $(this).attr("id"); // Get the ID
            alert(id);
            console.log(id);
        });
    });
</script>

EDIT I think I know why. I'm binding the Users ListView control when the SharedFolder Item is being bound so maybe the control doesn't exist yet. Is there a better more efficient way to do this? My goal was to display a popup with the user details when the link was clicked.

var folderList = $('#<%= lstViewSharedFolder.ClientID %>');
<!-- This causes the error -->
var userList = $('#<%= ((ListView)lstViewSharedFolder.FindControl("lstViewUsers")).ClientID %>');

Here's my lstViewSharedFolder_ItemDataBound().

protected void lstViewSharedFolder_ItemDataBound(object sender, ListViewItemEventArgs e)
        {
            ListViewDataItem dataItem = (ListViewDataItem)e.Item;

            if (e.Item.ItemType == ListViewItemType.DataItem)
            {
                var folder = (SharedFolder)dataItem.DataItem;
                var users = folder.Users;

                var lstView = (ListView)e.Item.FindControl("lstViewUsers");
                lstView.DataSource = users;
                lstView.DataBind();
            }
        }

Answer 1

No need to complicate things here. Just give the LinkButton a CssClass.

<asp:HyperLink ID="lnkUsername" runat="server" CssClass="my_link">
    <%# Eval( "UserName") %>
</asp:HyperLink>

and call it like

var userList = $('.my_link');