Передать имя класса в функцию

Question

У меня есть разные "Профили" в Json-файле. В файле index.html показаны разные профильные карточки, заполненные информацией из Json-файла. При нажатии на Profil (Profil-Card) будет загружен подробный файл profile.html и будет выполнена функция initateProfile.

 $(document).on("click", ".profile-card", function () {
    $('#page-content').load("sections/profile.html", function () {
       initiateProfile($(this).data("profileid"));
    });
 });

Я хочу передать содержимое класса profileid, который является индексом для файла Json.

function initiateProfile(id) {
  var profile_data;

  $.getJSON('data/profiles.json', function (data) {
     profile_data = data[id];
     $('.trn-name').text(profile_data.name);
     $('.trn-studies').text(profile_data.studies);
     $('.trn-stage').text(profile_data.stage);
  });
}

К сожалению, переменная id не определена. Таким образом, функция не может получить информацию о Json-файле. В чем проблема?

Thx

Answer 1

Проблема в том, что this в функции обработчика обратного вызова load() не является элементом, вызвавшим событие. Он работает в другой области. Чтобы это исправить, вам нужно сохранить ссылку на элемент в переменной в области действия обработчика click и использовать его в обратном вызове, примерно так:

$(document).on("click", ".profile-card", function () {
  var profileId = $(this).data('profileid');
  $('#page-content').load("sections/profile.html", function () {
    initiateProfile(profileId);
  });
});

Answer 2

Предполагая, что атрибут data-profileid определен для элемента, который имеет класс .profile-card:

Ваша проблема this.

$(document).on("click", ".profile-card", function () {
  $('#page-content').load("sections/profile.html", function () {
    initiateProfile($(this).data("profileid")); // "this" points to the element with id "page-content"
  });
});

Одним из решений будет использование event.currentTarget:

$(document).on("click", ".profile-card", function (event) {
  $('#page-content').load("sections/profile.html", function () {
    initiateProfile($(event.currentTarget).data("profileid"));
  });
});