jquery addClass 在负载上工作，但不是通过单击

Question

我对 jQuery 和 bootstrap 下拉菜单有疑问。此方法有效:

$("ul li#airlines-list.dropdown.hlink").addClass("open");

但是这个方法不行:

$(document).on('click', '#register-btn', function()
    {
        $("ul li#airlines-list.dropdown.hlink").addClass("open");
    });

-

<a id="register-btn" class="register-btn btn btn-custom btn-rnd animated    
fadeInDown wow">Register</a>
<li id="airlines-list" class="dropdown hlink">
<a id="airlines-btn" href="#" data-toggle="dropdown" aria-expanded="true"><i class="ion-plane"></i>
</a>
<ul id="airlines" class="airlines dropdown-menu arrow">
//somestuff 
</ul>
</li>

怎么了？

当我加载页面时，它会立即显示下拉菜单。但是当我点击 register-btn 时，它什么也没做。

Answer 1

好的，有两件事。首先，因为你有唯一的 ID(或者至少我希望如此 - 这就是 html id 的全部想法......)，拥有 $("#airlines-list") 就足够了而不是 $("ul li#airlines-list.dropdown.hlink")。

其次，当您绑定(bind)点击功能时，您可能希望首先选择您要绑定(bind)它的对象，而不是整个文档。看看下面的代码片段。

$('#register-btn').on('click', function()
    {
        alert("click");
        $("#airlines-list").addClass("open");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="register-btn" class="register-btn btn btn-custom btn-rnd animated    
fadeInDown wow">Register</a>
<li id="airlines-list" class="dropdown hlink">
<a id="airlines-btn" href="#" data-toggle="dropdown" aria-expanded="true"><i class="ion-plane"></i>
</a>
<ul id="airlines" class="airlines dropdown-menu arrow">
//somestuff 
</ul>
</li>