Не работает javascript после ajax?

Question

[Сергей]

JS только изучаю. После загрузки (по клику кнопки) дополнительных карточек товара с помощью Ajax, на них перестает работать Javascript, в том числе сортировка. Как я понял, это происходит из-за того, что js сработал после загрузки страницы, а так как ajax страницу не перезагружает, то и нет эффекта на новых элементах. Не могу понять что надо подправить.

document.querySelector('.main-page__button').onclick = function() {
  let showMore = function(data) {
    let list = $('.appartments')
    data.forEach(item => {
      let card =
        `<article class="appartments-item" tabindex="0">
          <div class="appartments-item__img-wrap">
            <img src="${item.img}" alt="план квартиры" class="appartments-item__img" title="${item.name}">
          </div>`
      list.append(card)
    })
  }
  $.ajax('https://api.myjson.com/bins/6dbie')
    .done(data => {
    showMore(data)
  })
    .fail(function() {
    alert('error');
  })

};

А это должно работать на новых элементах Ajax

$('body').on('click', '.appartments-item__star', function() {
  if ($(this).attr('click-state') == 1) {
    $(this).attr('click-state', 0)
    $(this).css({'background-position':'-10px -10px'})
  } else {
    $(this).attr('click-state', 1)
    $(this).css({'background-position':'-50px -10px'})
  }
});

И сортировка

var btn = document.querySelector('.sorting__price');
var toggle = false;

btn.addEventListener('click', function(){
var items = document.querySelectorAll('.appartments-item');
var parent = document.querySelector('.appartments');
var SortElements = new Object();
items.forEach(function(item, indx){
  var itemValue = parseInt(item.querySelector('.appartments-item__price');
  SortElements[itemValue] = {'element': item, 'index': indx} ;
});
var keys = Object.keys(SortElements);
function compareNumeric(a, b) {
  a = parseInt(a);
  b = parseInt(b);
  if (a < b) return 1;
  if (a > b) return -1;
}
keys.sort(compareNumeric);
keys.map(function(key, indx){
  parent.insertAdjacentElement('beforeend', SortElements[key]['element']);
});

Answer 1

[Aleksey Chernikov]

Проблема в том, что при инициализации обработчиков событий (в вашем случае это click), ваших элементов, которые приходят аяксом, еще нет.
Выход - навесить обработчики через родительские элементы. Например, так:

$('body').on('click',  '.appartments-item__star', function() {
....
})

Код для сортировки вынести в отдельную функцию и вызывать после аякса.

Comments

[Сергей]

Спасибо большое, с кликом работает, а вот с сортировкой не идет никак.
function sortingItems() { код сортировки }; - подразумевалось это?
И вызывать ее здесь ?
document.querySelector('.main-page__button').onclick = function() {
код ajax
sortingItems()
};

[Aleksey Chernikov]

Сергей, после того как причесали код, стало более понятно. Можете навесить на кнопку сортировки событие по такому же принципу - через body.

[Сергей]

Aleksey Chernikov, если не сложно, не могли бы показать код, буду признателен. Не выходит