时间戳

首页 > 解决方案 > jQuery addClass 和 toggleClass 不起作用

javascript - jQuery addClass 和 toggleClass 不起作用

问题描述

我使用数据表创建了一个表，并添加了一个“更多”按钮来触发一个迷你下拉菜单。此按钮及其下拉内容完美显示，但是，当我尝试使用 jQueryaddClass()或toggleClass()函数在任何时候单击该按钮时明确显示该按钮处于活动状态时，该按钮拒绝添加或切换“活动”类。

jQuery

$( "#dropdownDatatableButton" ).click(function() {
  $( "#dropdownDatatableButton" ).addClass( "active" );
});

CSS

#datatablesDropdown .active {
    background: rgb(37, 56, 88) !important;
    color: rgb(255, 255, 255);
}

datatables

          { data: null,
        render: function ( data, type, row, meta ) {
            return '<div class="dropdown" id="datatablesDropdown">'

            + '<span class="material-icons btn datatables-more-btn" type="button" id="dropdownDatatableButton"' <!--here is the button that triggers the dropdown-->

            + 'data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">more_horiz</span>'
            + '<div class="dropdown-menu dropdown-menu-right datatables-dropdown-inner"'
            + ' aria-labelledby="dropdownDatatableButton">'
            + '<ul>'
            + '<li><a href="' + data.url.toLowerCase() + '/settings' + '">Board settings</a></li>'
            + '<li><a class="btn btn-link btn-sm text-left">Delete</a></li>'
            + '</ul>'
            + '</div>'
            + '</div>';
        },
    },
],

标签： javascriptjquerydatatables

解决方案

ID 在页面中必须是唯一的，并且您还需要委托事件侦听器，因为插件会重新呈现页面更改、搜索、排序等。

此外，您希望针对事件发生的特定按钮

尝试：

$('table').on('click', ".dropdownDatatableButton" ,function() {
  $(this).toggleClass( "active" );
});

并在 html 和 css 中将 ID 更改为 class。

请参阅：了解事件委托

推荐阅读