Click Dynamically Generated ID

Question

Click Dynamically Generated ID

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Good evening!

I have a remove button that is generated via Jquery. I would like to know how to click this button via pure Javascript.

I have tried to diversify the way the button is not seen in the source code, only when I inspect.

$("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>

javascript html jquery css

asked by anonymous 11.07.2018 / 22:10

3 answers

Daughter Routes, Angular 5 Buy list values

score 1 · Answer 1

My answer is based on the case of inserting ONLY 1 button with id #BtnRemove , as informed in the question:

I have a remove button that is generated via Jquery [...]

If you are inserting several of these buttons, it is already incorrect because you are duplicating id s, since a id must be unique on the page. If this is the case, you must do it using class instead of id .

You can use document.querySelector("body").addEventListener("click"... checking that target of event has id of button:

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

The variable e (you can use any name for this variable) returns the called event. The target property returns the target element of the event (in this case, the element clicked) and .id the attribute id of the element.

Checking in if if id is that of the question element ("Remove" button), you can perform the action you want.

Illustrative example:

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>

score 0 · Answer 2

The problem is that there is no button in your code:

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

The correct way would look like this:

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

see the example in a 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><spanid="btn"></span>

For you to click on it via pure javascript is enough:

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

where my_botao takes the page button by its id, and my_botao [0] .click (); click

score 0 · Answer 3

Possibly the element you are looking for has not yet been loaded into the DOM,

To solve this you can load your scripts at the bottom of the page, here you will find a brief explanation:

Where should I put a Javascript code in an HTML document?

#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><scripttype="text/javascript">
  $("span").html("<div id='BtnRemove'>CLIQUE AQUI</div>");

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

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