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 () {
  ...

我的<ul>的JS选择器无法正常工作</ul>

1 个答案: