时间戳

首页 > 解决方案 > 将类添加到按钮后，我的单击功能不适用于按钮

javascript - 将类添加到按钮后，我的单击功能不适用于按钮

问题描述

基本上，代码的重点在于它是一个下拉列表。下拉列表最初显示为无，当单击它时，会在其上添加一个活动的下拉类。问题是，一旦添加它，当我尝试使用 jquery 听到点击时它就不起作用了。

html

<button onclick="dropdown_btn()" type="button" style="background: none; border:none; font-size: 25px; 
        font-weight: bold; position: relative; top: 29%; cursor: pointer; outline: none" id="user-page" class = 'user-dashboard-dropdown'>
        <img width="50" src="{% static 'imgs/user-icon.png' %}">
</button>

<div class="dropdown-for-user" style="display:none">
     <ul style="list-style-type: none;">
     <li><a href="{% url 'profile' %}">Profile</a></li>
     <li><a href="{% url 'account' %}">Account</a></li>
     <li><a href="{% url 'saved-items' %}">Saved Items</a></li>
     <li><a href="{% url 'listed-items' %}">Listed Items</a></li>
     <li style="border-bottom: none;"><a href="{% url 'logout' %}">Logout</a></li></ul></div>

jQuery/javascript

   function dropdown_btn(){
        $('.user-dashboard-dropdown').addClass('active-dropdown');
        $('.dropdown-for-user').css('display', '');
    
    }
    
    $('.user-dashboard-dropdown.active-dropdown').click(function(){
        alert('ran');
        $(this).removeClass('active-dropdown');
        $('.dropdown-for-user').css('display', 'none');
    });

标签： javascripthtmljquery

解决方案

您可以使用事件委托。

$(document).on('click', '.user-dashboard-dropdown.active-dropdown', function(){
        alert('ran');
        $(this).removeClass('active-dropdown');
        $('.dropdown-for-user').css('display', 'none');
});

推荐阅读