Как добавить, затем ссылаться на div с идентификатором, а затем удалять его на JS. (Интернет)

Question

Я пытаюсь скрыть полосу прокрутки при открытии полноэкранного меню. В той части, которую я получил, мне не хватает той же кнопки, которая скрывает полосу прокрутки, чтобы она снова появилась (удаление .no-scroll из тела). Вот моя неудачная попытка, похоже, вторая функция не работает.

$('.menu_container').on('click', function(){
  $('body').addClass('no-scroll');
  $('.menu_container').attr('id', 'menu_close');
});

$('#menu_close').on('click', function(){
  $('body').removeClass('no-scroll');
  $('#menu_close').removeAttr('menu_close');
});

Answer 1

Ваши обработчики событий присоединяются, как только загружается DOM. И когда это происходит, элемента с идентификатором #menu_close еще нет (поскольку он добавляется только после того, как вы щелкнете по .menu_container), поэтому второй обработчик событий ни к чему не привязан.

Вы можете переместить его вверх внутри первая функция такая:

$('.menu_container').on('click', function(){
  $('body').addClass('no-scroll');
  $('.menu_container').attr('id', 'menu_close');

  $('#menu_close').on('click', function(){
    $('body').removeClass('no-scroll');
    $('#menu_close').removeAttr('menu_close');
  });
});

Answer 2

Это потому, что вы удалили идентификатор, по которому вы находите элемент.

Если вы хотите добавить и удалить класс, который делает ваше использование прокручиваемым:

$( 'body' ).addClass( 'no-scroll' );

И:

$( 'body' ).removeClass( 'no-scroll' );