jQuery addClass 和 toggleClass 不工作

Question

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

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>';
        },
    },
],

Answer 1

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

此外，您还想定位事件发生的特定按钮

尝试：

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

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

参见：Understanding Event Delegation

jQuery addClass 和 toggleClass 不工作

jQuery addClass and toggleClass not working

javascript

jquery

datatables