@DaveGarrow

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

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']);
});
  • Вопрос задан
  • 1016 просмотров
Решения вопроса 1
Проблема в том, что при инициализации обработчиков событий (в вашем случае это click), ваших элементов, которые приходят аяксом, еще нет.
Выход - навесить обработчики через родительские элементы. Например, так:
$('body').on('click',  '.appartments-item__star', function() {
....
})


Код для сортировки вынести в отдельную функцию и вызывать после аякса.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 апр. 2024, в 05:01
999999 руб./за проект
19 апр. 2024, в 03:52
1000 руб./за проект
19 апр. 2024, в 03:01
1000 руб./за проект