0

Boa noite!

Tenho um botão de remover que é gerado via Jquery. Gostaria de saber como clicar neste botão via Javascript puro.

Já tentei diversar formas as o botão não é visto no código fonte, apenas quando inspeciono.

$("span").html("<div id='BtnRemove'>Remover</div>");
#BtnRemove {
  
  padding: 10px;
  color: #fff;
  background: red;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<span></span>

6
  • 1
    Bom, primeiro, você não tem um botão e sim uma <div>. Agora, o que você quer dizer em clicar no botão com JavaScript puro e por que essa restrição uma vez que você já está utilizando JQuery? Commented 11/07/2018 às 20:15
  • 1
    @LeandroAngelo Uma div (ou qualquer outro elemento) pode se tornar um botão também quando vc formata para funcionar como um botão. No caso pode não ser um botão em si, mas apenas tem a função de ser um botão :D
    – Sam
    Commented 11/07/2018 às 20:22
  • @dvd Isso eu sei, mas é aparência ou role, mas nesse continua sendo uma <div>. E nenhum behavior pro evento de click foi apresentando, e talvez a restrição de JavaScript pode ser porque o AP está tentando fazer o bind quando o elemento ainda não existe na DOM e acha que por conta JQuery. (especulando) Commented 11/07/2018 às 20:30
  • @Oclácio, esse botão é gerado como? tens controle sobre esse código? vai haver mais que um botão igual na página?
    – Sergio
    Commented 11/07/2018 às 21:32
  • Não há outros botões com esse ID, ele é único na página. Commented 12/07/2018 às 11:34

3 Respostas 3

1

Minha resposta é baseada no caso de se inserir APENAS 1 botão com a id #BtnRemove, conforme informado na pergunta:

Tenho um botão de remover que é gerado via Jquery[...]

Se estiver inserindo vários desses botões, já está incorreto pois estás duplicando ids, pois um id deve ser único na página. Se for este o caso, é preciso fazer de outra forma utilizando class em vez de id.


Você pode usar document.querySelector("body").addEventListener("click"... verificando se o target do evento possui a id do botão:

document.querySelector("body").addEventListener("click", function(e){
   if(e.target.id == 'BtnRemove'){
      // ação ao clicar no botão
   }
});

A variável e (você pode usar qualquer nome para essa variável) retorna o evento chamado. A propriedade target retorna o elemento alvo do evento (no caso, o elemento clicado) e .id o atributo id do elemento.

Verificando no if se a id é a do elemento quem questão (botão "Remover"), você pode executar a ação que deseja.

Exemplo ilustrativo:

document.querySelector("body").addEventListener("click", function(e){
   if(e.target.id == 'BtnRemove'){
      console.log("botão clicado");
   }
});
$("span").html("<div id='BtnRemove'>Remover</div>");
#BtnRemove {
  padding: 10px;
  color: #fff;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>

7
  • 1
    Eu só trocaria o nome da function :P Commented 11/07/2018 às 21:05
  • IDs têm de ser únicas. Quando crias uma função que gera IDs duplicadas estás a gerar HTML errado e JavaScript errado.
    – Sergio
    Commented 11/07/2018 às 21:30
  • Se sabes que está errado sugiro não dares soluções que criem código errado (o que acontece se alguém carregar 2 vezes em <button onClick="addButt()"> e que indiques na resposta a problemática de IDs duplicadas.
    – Sergio
    Commented 11/07/2018 às 21:35
  • Eu percebo, e acabaste por ilustrar, sem aviso, como se faz código que gera HTML errado e problemas de código difíceis de perceber a quem estiver a aprender. E acho isso errado, e que devia ser corrigido. Como a resposta não é minha comento para te ajudar a ver o erro e melhorares a resposta.
    – Sergio
    Commented 11/07/2018 às 21:39
  • @Sergio Veja se melhorou agora, amigo.
    – Sam
    Commented 11/07/2018 às 22:04
0

O problema está porque não tem um botão no seu código:

$("span").html("<div id='BtnRemove'>Remover</div>");

a maneira correta seria assim:

$("span").html("<div id='BtnRemove'><button type='button' onclick='alert(1)'>Remover</button></div>");

veja o exemplo em um run code.

$("document").ready(function(){
  
  $("#btn").html("<button type='button' onclick='alert(1)'>button</button>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<span id="btn"></span>

Para você clicar nele via javascript puro basta:

var meu_botao = document.getElementsByTagId("btn");
meu_botao[i].click();

aonde meu_botao pega o botao da pagina pelo id dele, e meu_botao[0].click(); realiza o click

0

Possivelmente o elemento que você está buscando ainda não foi carregado no DOM,

Para solucionar isso você pode carregar seus scripts no final da pagina, aqui você encontra uma breve explicação:

Onde devo colocar um código JavaScript em um documento HTML?

#BtnRemove {
  padding: 10px;
  color: #fff;
  background: red;
  cursor: pointer;
}
<body>
  <span></span>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

  <script type="text/javascript">
  $("span").html("<div id='BtnRemove'>CLIQUE AQUI</div>");

  var botaoAdicionado = document.getElementById("BtnRemove");

  botaoAdicionado.addEventListener('click', function() { 
    alert('Você clicou'); 
  });
  </script>
</body>

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 .