0

Clicando em um botão faço uma string aparecer, mas essa string tem um botão (vamos chamar de botão2), porém botão2 não funciona. Por quê?

Eu clico este botão:

$("#button1").click(function(){
    $("#div1").append(palavra1);

  });

No entanto, palavra1 tem um botão escrito, com id que chama a função Jquery, como a que mostrei acima.

Este botão é exibido na #div1, mas quando o clico, ele não faz o que a função diz, que nesse caso é um alert("teste"); Já tentei sem usar jquery, por onclick() mesmo e nesse caso o console disse que a função não estava definida.

Abaixo coloquei o código completo, é meio maluco, acho que não vão entender. O ajax está ali incompleto, porque ainda vou terminar. O que importa mesmo é essa parte do botão.

$("#negacao").click(function() {
  $("#div1").append("algo");
});


$(document).ready(function() {
  $('#ajax').on('click', AJAX);

  function AJAX() {
    $.ajax({
      method: 'post',
      url: 'new2.php',
      data: {
        ncode: "asfdasf"
      },
      success: function(retorno) {
        $('#conteudo_ajax').html(retorno);

      }
    });
  }
  var palavra = $("div#algo").text();
  var reserva = palavra;
  var vseq = palavra.split("||");

  for (var i = 0; i < vseq.length; i++) {
    //alert(vseq[i]);
    var partes = vseq[i].split("|--");
    var antes = partes[0];
    var depois = partes[1];
    var contextos = depois.split(";");
    var classico = contextos[0]; // contexto classico [... ]
    var linear = contextos[1]; // contexto linear {... }
    var formula = linear.slice(2, linear.length - 2);
    var sublinear = formula.split(",");
    for (var i = 0; i < sublinear.length; i++) {
      if (sublinear[i].match(/~\D?\(\D?\D?\D?\D?\D?\D?\D?\D?\D?\D?\D?\)/ig)) {
        //alert(sublinear[i]);
        //alert(palavra.lastIndexOf(sublinear[i]));
        var chapeu = sublinear[i].indexOf("~");
        var parens = sublinear[i].indexOf("(");

        var corte1 = sublinear[i].slice(chapeu, parens);
        var corte2 = sublinear[i].slice(parens, sublinear[i].length);


        palavra1 = palavra.replace(sublinear[i], "<button type='button' class='regra' id='negacao' >" + corte1 + "</button>" + corte2);
        //alert(palavra1);
        $("#button1").click(function() {
          $("#div1").append(palavra1);

        });


      } else {
        alert("NAO TEM NEGACAO");
      }

    }



    /*for(var j = 0; j < contextos.length; j++){
     	alert(contextos[j]);
     }\ */


  }




});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<fieldset>
  <h1>Exemplo 1</h1>
  <!--<input type="button" value="$.ajax()" id='ajax'><br> -->
  <div id="algo"> [C',F] ; {empty} |-- [D'] ; {~(F + ~ G)} </div>
  <br>[C'] ; G |-- [D'] ; {F + G}
  <br>[C'] ; {! F} |-- [D'] ; {~ (F & G), D}
  <br/>
  <div id='conteudo_ajax'></div><br>
</fieldset>

<div id='div1'> </div>
<br><button id='button1'> AA </button> <br>

2
  • Tem como postar o código inteiro?
    – Woss
    Commented 2/05/2017 às 22:41
  • Coloquei, Anderson Commented 2/05/2017 às 22:46

1 Resposta 1

5

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.

1
  • Obrigado, sua resposta ajudou bastante. Deu tudo certo aqui. Commented 3/05/2017 às 23:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .