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

Question

[AlShest]

У меня есть, грубо говоря, блок. В нем строки с кнопками, у кнопок есть 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 тоже не выводится. При нажатии на кнопку просто ничего не происходит.

Comments

[Глеб Старков]

так у вас testBlock это класс, а не айди

[AlShest]

Глеб Старков, соррян, верстка примерная. Ошибка точно не в этом.

[Rsa97]

Кнопки присутствуют в документе с самого начала или создаются скриптом уже после загрузки страницы?

[AlShest]

Rsa97, создаются, но не скриптом, а выводятся из бекенда через twig. То есть у меня twig шаблон, а не html страница, и в нем выводятся твиговским циклом строки с кнопками.

Answer 1

[Rsa97]

создаются, но не скриптом, а выводятся из бекенда через twig.

Значит на момент вызова .click у вас кнопок ещё нет и обработчик вешать не на что.
Используйте всплытие событий:

$('body').on('click', '.btn', function() {
  ...
});

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