javascript - 我的 <ul> JS 选择器不起作用

Question

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

• ulSauk联系方式
• ulMosel联系方式
• 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

由于当您尝试将事件绑定(bind)到这些元素时，这些元素并不存在，因此您需要使用 on 将事件委托(delegate)给包含元素:

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