Как получить атрибуты элемента найденного среди элементов с таким же классом?

Question

[Егор Михеев]

Здравствуйте столкнулся с проблемой и пока не смог ее "красиво обойти".
Есть элементы HTML

<ul>
                    <li><a href="events" class="btn-menu">1</a></li>
                    <li><a href="about" class="btn-menu">2</a></li>
                    <li><a href="gallery" class="btn-menu">3</a></li>
                    <li><a href="connection" class="btn-menu">4</a></li>
                    <li><a href="teachers" class="btn-menu">5</a></li>
                    <li><a href="cooperations" class="btn-menu">6</a></li>
</ul>

Есть обработчик который должен получить href

jQuery(document).ready(function($) {
    $('.btn-menu').on('click', function(event) {
        event.preventDefault();
// получаем адрес для загрузки. 
var href = './a_vie/content/' + $(this).attr('href') + '.php';
        
// закрываем меню
      var e = jQuery.Event( "click" );
      $( ".cd-close" ).trigger( e );
 
      $('#modal-about').modal({
          remote: href
      });
    });
});

Собственно при обращении к текущему элементу:
// получаем адрес для загрузки.
var href = './a_vie/content/' + $(this).attr('href') + '.php';
Получает данные первого элемента из класса btn-menu. Каким образом без существенного увеличения кода, решить проблему парсинга атрибутов у текущего элемента массива

Comments

[Егор Михеев]

Условие немного изменилось, оказывается, что в первый раз вызов нужного элемента происходит корректно $(this).attr('href'), но при повторном вызове функции для других ссылок происходит выбор предшествующей.

[Сергей Сергей]

толком ничего не понятно, но по понятому:

jQuery(document).ready(function($) {
  $('.btn-menu').each(function(a){
    $(a).on('click', function(event) {
      event.preventDefault();
      // получаем адрес для загрузки. 
      var href = './a_vie/content/' + $(this).attr('href') + '.php';
      // закрываем меню
      var e = jQuery.Event( "click" );
      $( ".cd-close" ).trigger( e );
      $('#modal-about').modal({
        remote: href
      });
    });
  });
});

[Егор Михеев]

Ваш пример не работает:
https://nebesa.me/ordim/
вот рабочий образец:
Захожу в меню, нажимаю на кнопку она вызывает модальное окно.
Если без перезагрузки страницы, то при нажатии другой кнопки с этим же классом вызывается это же модальное окно. А должно со своим адресом.

[Егор Михеев]

Вывел через консоль значение переменной href - тут все нормально, постоянно нужное для каждой страницы, значит что то дальше в модалах.

Answer 1

[Егор Михеев]

На самом деле проблема в модальных окнах, которые асинхронно загружают контент. (В случае если с одним и тем же классом модальных окон, привязано несколько вызывающих обьектов)
Перед инициализацией вывода нового модального окна, надо очистить кеш:
$('#modal').removeData();
Либо запретить на более высоком уровне.
$.ajaxSetup({
cache: false
})

Answer 2

[Сергей]

Попробуйте в место $(this) использовать $(event.target);