Не работает функция ajax к форме которая создается шаблонизатором. Как исправить?

Question

[Дмитрий]

Есть div .groups

<div class="col area">
        <div class="row">
            <div class="col-5 groups table-responsive" id="groups">
            </div>
            <div class="col-6 posts">
            </div>
        </div>
 </div>

Внутри него по нажатию кнопки с помощью Handlebars создается форма

<script id="entry-template" type="text/x-handlebars-template">
  <form action="function.php" method="get" id="btnposts">
    {{#each response}}
    <label><input type="checkbox" name={{screen_name}} value={{gid}}><img src={{photo}} alt={{screen_name}}> {{name}}</label><br>
    {{/each}}
    <input type="submit" value="Посты" class="btn btn-outline-success" onclick=f()>
  </form>
</script>

Есть скрипт который ajax запросом должен отправлять данные этой формы

$(document).ready(function(){

  $( "#btnposts" ).submit(function( event ) {

    event.preventDefault();

    $.ajax({
      type: 'get',
      url: 'function.php',
      data: {'getPosts':'yes'},
      contentType: false,
      cache: false,
      proccessData: true,
      success: function(result) {
        alert(result);
      }
    })
  });
})

Но при нажатии на кнопку отправляется не с помощью ajax, а обычным get запросом с переадресацией на function.php

Сразу скажу что форма создается по нажатию другой кнопки и изначально ее на странице нет. Как это все мне привести к рабочему виду.

P.S. уровень знаний достаточно мал, так что пока учусь на своем проекте и делаю кучу ошибок. Не судите строго.

Answer 1

[Ilya]

сделай так:

$(document).on('submit', '#btnposts', functions() { /*код формы*/})

Comments

[Дмитрий]

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

$( "#btnposts" ).submit(function( event ) {

    event.preventDefault();

    $.ajax({
      type: 'get',
      url: 'function.php',
      data: {'getPosts':'yes'},
      contentType: false,
      cache: false,
      proccessData: true,
      success: function(result) {
        alert(result);
      }
    })
  });

[Дмитрий]

Все, сделал. Просто скопировал Ваш код, и он не работал. А всего то надо было functions() на function() изменить)

Answer 2

[Егор Живагин]

Вам правильно ответили уже, добавлю - почитайте про делегирование событий в JS, чтобы лучше понимать происходящее

Comments

[Дмитрий]

Понимаю, что возможно делаю не правильно, что я не изучив мат. часть сразу лезу что-то строить, но если у меня нет какого-то видимого минимального результата - сразу перестаю заниматься полезным и лезу в facebooк котиков смотреть :(