Primeiro, o atributo id
do HTML define elementos únicos no documento, portanto, criar múltiplos botões com id="negacao"
não faz sentido algum e é semanticamente errado.
Segundo, quando você atribui uma função a um evento, tal como:
$("#negacao").click(function() {
$("#div1").append("algo");
});
Apenas o elemento carregado inicialmente no DOM, cujo id
é igual a negacao
que terá este evento. Elementos adicionados ao DOM posteriormente não terão o mesmo efeito. Para isso, é necessário acrescentar o evento ao elemento manualmente. Primeiro, veja o exemplo demonstrando como não funciona:
$(document).ready(function() {
$(".negacao").click(function () {
console.log("Eu funciono!");
});
$("#btn1").click(function () {
$("#div1").append("<button type=\button\" class=\"negacao\">Pressione-me!</button>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<button type="button" class="negacao">Pressione-me!</button>
</div>
<button type="button" id="btn1">Adicionar</button>
Para corrigir:
function do_something() {
console.log("Eu funciono!");
}
$(document).ready(function() {
$(".negacao").click(do_something);
$("#btn1").click(function () {
// Cria o novo botão:
const newBtn = $("<button type=\button\" class=\"negacao\">Pressione-me!</button>");
// Atribui o evento click a ele:
newBtn.click(do_something);
// Adiciona-o à lista de botões:
$("#div1").append(newBtn);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<button type="button" class="negacao">Pressione-me!</button>
</div>
<button type="button" id="btn1">Adicionar</button>
Desta forma, atribuindo manualmente o evento click
, com a função do_something
ao novo elemento do documento, o botão funcionará perfeitamente.
Na resposta apresentei a ideia básica da solução, sendo necessário adaptações à sua necessidade conforme o seu problema tendo em vista que não era possível reproduzí-lo por completo por aqui.