Skip to main content
adicionou 18 caracteres ao conteúdo
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

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.

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>

function do_something() {
  console.log("Eu funciono!");
}

$(document).ready(function() {

  $(".negacao").click(do_something);
  
  $("#btn1").click(function () {
    const newBtn = $("<button type=\button\" class=\"negacao\">Pressione-me!</button>");
    newBtn.click(do_something);
  
    $("#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.

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.

Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

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>

function do_something() {
  console.log("Eu funciono!");
}

$(document).ready(function() {

  $(".negacao").click(do_something);
  
  $("#btn1").click(function () {
    const newBtn = $("<button type=\button\" class=\"negacao\">Pressione-me!</button>");
    newBtn.click(do_something);
  
    $("#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.