我的 <ul> JS 选择器不起作用[重复]

Question

我正在使用多个 Bootstrap 下拉控件，并且需要在选择特定下拉列表的列表项时为输入字段设置一个值。例如，假设我有 3 个下拉菜单：

• ulSaukContact
• ulMoselContact
• ulShipContact

这三个都在服务器上运行，我需要获取每个的值，以便将它们保存在某个地方。所以我想我可能应该将每个值保存到一个隐藏的输入字段中，以便稍后引用。这是我尝试执行此操作的 JS 代码：

$("#ulSaukContact li a").on("click", function () {
    alert('sauk'); // <--- Alert is not shown
    var elem = document.getElementById("inpSaukValue");
    elem.Value = $(this).text();
});

以及相应的标记

        <div class="dropdown">
            <button type="button" class="btn btn-default dropdown-toggle" id="btnSaukList" data-toggle="dropdown" runat="server"
                style="width: 100%;">
                <span style="padding-right: 250px;">Select a Saukville contact</span>
                <span class="caret"></span>
            </button>
            <ul id="ulSaukContact" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" runat="server" style="width: 100%">
                <!--NOTE: Intentionally left blank; li's are generated by code behind to populate users from Sharepoint.-->
            </ul>
            <input id="inpSaukValue" type="hidden" />
        </div>

当我运行应用程序并在 Saukville 下拉列表中选择一个值时，不会显示任何警报。 请注意，ul 中的 li 和 a 是在 Form_Load 上创建的，因此可以用数据填充它们。我认为我的选择器是错误的。我在 Chrome 中清除了我的缓存文件（之前曾导致问题），但我仍然没有看到警报。

任何建议表示赞赏（感谢所有最近的 JS/BS/JQ 建议）...

Answer 1

由于在您尝试将事件绑定到它们时元素不存在，您需要使用 on 将事件委托给包含元素：

$("#ulSaukContact").on("click", "li a", function () {
  ...