Estou adicionando uma linha estatica com um textbox e um checkbox estaticamente no HTML da página, o usuário poderá adiconar mais linhas e depois selecionar o(s) checkbox(es). Por algum motivo apenas o checkbox estático está sendo capturado quando é selecionado ou quando é buscado todos os checkbox selecionados. Alguma ajuda?
questoes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grupo LC</title>
<link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<div class="container well">
<div class="row header">
<div class="col-md-6 brand">
<h1>Questão</h1>
</div>
</div>
<!--form -->
<form id="frm" data-toggle="validator" role="form">
<div class="form-group row">
<div class="col-md-12">
<label for="pergunta" class="control-label">Pergunta:</label>
<input id="pergunta" class="form-control" placeholder="Descreva a pergunta..." type="text">
</div>
</div>
<div id="div_resposta" class="form-group row">
<div class="col-md-6">
<label for="resposta" class="control-label">Respostas:</label>
</div>
<div class="col-md-6">
<label for="" class="control-label">Correta:</label>
</div>
<div class="div_resposta_padrao col-md-12 recuo">
<div class="col-md-6">
<input id="resposta" class="form-control" placeholder="Descreva a resposta..." type="text">
</div>
<div class="col-md-6 checkbox checkbox-success">
<input type="checkbox" name="ckb_resp" id="1">
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<button type="button" id="btn_add_resposta" class="btn ">
<span class="glyphicon glyphicon-plus"></span> Adicionar Resposta
</button>
</div>
</div>
<div class="form-group row pull-right">
<div class="col-md-12">
<button type="button" id="btn-gravar" class="btn btn-default">Gravar</button>
</div>
</div>
</form>
<!-- Scripts -->
<script src="lib/jquery/jquery-1.10.2.min.js"></script>
<script src="js/form-questao.js"></script>
</body>
</html>form-questoes.js
(function(){
var form_questao = {
init: function(){
this.load();
},
load: function(){
$ckNr = 1;
this.events.btn_add_resposta_click();
this.events.ckb_resposta_click();
},
events:{
btn_add_resposta_click : function(){
$("#btn_add_resposta").click(function(){
if($ckNr < 10){
form_questao.methods.add_nova_resposta();
}
});
},
ckb_resposta_click : function(){
// Esta função é responsável por capturar os checkboxes selecioandos, mas apenas o primeiro está sendo capturado.
$('input[type="checkbox"]').click(function(){
console.log('checked');
});
}
},
methods:{
add_nova_resposta : function(){
$ckNr ++;
$('.div_resposta_padrao').last().after(
'<div class="div_resposta_padrao col-md-12 recuo" id="2">' +
'<div class="col-md-6">' +
'<input id="resposta'+ $ckNr +'" class="form-control" placeholder="Descreva a resposta..." type="text">'+
'</div>' +
'<div class="col-md-6 checkbox checkbox-success">'+
'<input type="checkbox" name="ckb_resp" id="'+ $ckNr +'">'+
'</div>'+
'</div>');
}
}
}
form_questao.init();
})();