addClass не добавляет класс к элементу

Question

Я хочу добавить класс .filter_open к моему элементу с идентификатором #block_filters, когда нажимаю на # filter-button элемент, так что вот мой HTML:

<a id="filter-button" >Show filters</a>
<div class="block_content" id="block_filters" >


</div>

Вот мой. js

function open_filters() {
  var f_toggle = $('#filter-button');
  var f_content = $('#block_filters');
  f_toggle.on('click', function(e) {
    f_content.addClass('filter_open');
    e.stopPropagation();
    e.preventDefault();
  });

}

Но это не работает, я не могу найти причину.

Спасибо за вашу помощь

Редактировать:

Я тоже так тестирую, но не повезло

$(document).ready(function () 
            {
                $('#filter-button').click(function () {
                    $('#block_filters').addClass('filter_open');

                });
            }

Answer 1

Вы можете попробовать это так. Прочитайте ссылку ниже, чтобы лучше понять

Привязка событий к динамически создаваемым элементам?

$(document).ready(function() { open_filters(); });

function open_filters() {
  var f_toggle = $(document).find('#filter-button');
  var f_content = $(document).find('#block_filters');
  
  f_toggle.on('click', function(e) {
    f_content.addClass('filter_open');
    e.stopPropagation();
    e.preventDefault();
  });

}

.filter_open{
 background-color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="filter-button" >Show filters</a>
<div class="block_content" id="block_filters" >Content</div>

Answer 2

Просто добавьте в свой сценарий protectDefault, чтобы браузер не обновил sh, см. Код ниже

$('#filter-button').click(function (e) {
    e.preventDefault()
    $('#block_filters').addClass('filter_open');

});

Убедитесь, что вы импортировали скрипт jquery в тег head

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

В принципе, вы уже добавили класс, но после перезагрузки страницы он снова установит класс по умолчанию.