0
Good night!
I have a remove button which is generated via Jquery. I would like to know how to click this button via pure Javascript.
I’ve tried different shapes 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>1
My answer is based on the case of inserting ONLY 1 button with the id #BtnRemove, as reported 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 ids, as a id should be unique on the page. If this is the case, you need to do otherwise using class instead of id.
You can use document.querySelector("body").addEventListener("click"... checking whether the target of the event has the id 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 that variable) returns the called event. The property target returns the element target the event (in this case, the clicked item) and .id the attribute id of the element.
Checking in the if if the id is the of the element who matters ("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>I would only change the name of Function :P
Ids must be unique. When you create a function that generates duplicate Ids you are generating wrong HTML and wrong Javascript.
If you know you’re wrong I suggest not giving solutions that create wrong code (what happens if someone presses 2 times on <button onClick="addButt()"> and indicate in the answer the problem of duplicate Ids.
I understand, and you ended up illustrating, without warning, how you make code that generates wrong HTML and hard-to-understand code problems from whoever you’re learning. And I think this is wrong, and it should be corrected. As the answer is not my comment to help you see the error and improve the answer.
@Sergio See if you’re better now, buddy.
@Yeah, much better dvd. I still think you should warn about the issues of duplicate Ids, because your code (now with the event delegation) will work if there are duplicate Ids, and should not allow this.
@Sergio Obg! I’ll insert this in the answer.
0
The problem is because you don’t have a button in your code:
$("span").html("<div id='BtnRemove'>Remover</div>");
the right way would be so:
$("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>
<span id="btn"></span>For you to click on it via pure javascript simply:
var meu_botao = document.getElementsByTagId("btn");
meu_botao[i].click();
where meu_botao picks up the button of the page by its id, and meu_botao[0]. click(); click
0
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 end of the page, here you 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>
<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>Browser other questions tagged javascript html jquery css
You are not signed in. Login or sign up in order to post.
Well, first, you don’t have a button
<div>. Now, what you mean by clicking the button with pure Javascript and why this restriction since you are already using Jquery?– Leandro Angelo
@Leandroangelo A div (or any other element) can become a button also when you format to work as a button. In this case it may not be a button itself, but it only has the function of being a :D button
– Sam
@dvd This I know, but it is appearance or role, but this remains a <div>. And no click event behavior has been presented, and maybe the Javascript constraint may be because AP is trying to bind when the element does not yet exist in the DOM and thinks that by Jquery account. (speculating)
– Leandro Angelo
@Oclácio, this button is generated as? do you have control over this code? there will be more than one button equal on the page?
– Sergio
There are no other buttons with this ID, it is unique on the page.
– Oclácio Silva
When I give a Document.getElementById("Btnremove"); the console returns me NULL, returns null when it is generated dynamically. When I put it manually the console returns me Object. That’s what I want to understand Why the console returns NULL when the ID is generated dynamically and how can I locate this ID and Click On It.
– Oclácio Silva