Есть 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. уровень знаний достаточно мал, так что пока учусь на своем проекте и делаю кучу ошибок. Не судите строго.
