@AlShest

Почему не работает jQuery.ajax метод get?

У меня есть, грубо говоря, блок. В нем строки с кнопками, у кнопок есть data-url с ссылкой.
Мне нужно загрузить содержимое страницы по этим ссылкам в блок.

Вот мой неработающий запрос:
$(document).ready(function(){  
  $(".btn").click(function(){
      $.ajax({
        type: "get",
        url: $(this).data("url"),
        dataType: 'html',
        success: function(data){
             $("#testBlock").html(data);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $("#testBlock").html('<strong>Houston, we have a problem.</strong>');
        },
    });
  });
})

И примерная верстка
<div class="testBlock">
  <div class="row">
    <button data-url="/catalog/link-link1" class="btn">Click</button>
  </div>
  <div class="row">
    <button data-url="/catalog/link-link2" class="btn">Click</button>
  </div>
  <div class="row">
    <button data-url="/catalog/link-link3" class="btn">Click</button>
  </div>
</div>

В консоли ошибок нет. error: function тоже не выводится. При нажатии на кнопку просто ничего не происходит.
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
создаются, но не скриптом, а выводятся из бекенда через twig.
Значит на момент вызова .click у вас кнопок ещё нет и обработчик вешать не на что.
Используйте всплытие событий:
$('body').on('click', '.btn', function() {
  ...
});

Вместо 'body' можно использовать селектор любого родителя кнопок, который существует на момент загрузки страницы и не переписывается в дальнейшем.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы