0

My understanding is that I should usually avoid using onclick in HTML, since is better to keep separate HTML structure and JS logic. However in this case, I have an application where the user can search for records and the results are displayed in divs dynamically generated from a php file using AJAX. In each div there is a button which when is clicked must perform a JS function and the function argument is the record unique id.

My point is: how could i select a dynamically created button with vanilla JS, since it does not exist when JS is loaded?

maru1926
  • 1
  • 2
  • Make a delegate event listener on a pre-existing parent of the dynamic fields, catch the click event, determine if it is one of the elements you want to process for, and if so, perform your logic. – Taplar Aug 25 '20 at 18:05
  • And this is why I am spoiled to death using jquery these days. – IncredibleHat Aug 25 '20 at 19:44

2 Answers2

0

Instead of adding the click handler to the button, attach it to parent element of where the buttons will be placed. Then using e.targetin the click handler you can reference the button that was clicked.

var div = document.querySelector("div");

div.addEventListener("click",function(e){
    console.log(e.target.getAttribute("id"))
});

div.innerHTML = "<button id='test' type='button'>Test</button>";
<div>
</div>
imvain2
  • 15,480
  • 1
  • 16
  • 21
0

You can use the idea of event bubbling

example:

addDiv = document.querySelector("#addDiv");
list = document.querySelector(".list");
//as an example the ID is this counter
let id = 1;
addDiv.addEventListener("click", () => {
    //this is a callback function that is going to add a new item to the DOM.
    //in your case this is being implemented in php.
    list.innerHTML += `<br><div id="${id}"><button>Click me to see my ID</button></div> <br>`;
    id++; //meaning id = id + 1
});

//now the answer of your question:

const getTheID = (e) => {
    //this function will be called (invoked) as soon as one of the elements inside the ".list" div has been clicked
    e = e || window.event; 
    // "e" is the event that happened, it is an object that have lots of other objects, you can use "console.log(e);" to see what is "e", I've added the || (meaning OR) window.event to
    //make sure that I'll catch the event, you can just rely on the e argument that is being passed by the browser automatically, but the better implementation is to add || window.event
    target = e.target || e.srcElement; 
    // e.target and e.srcElement are the same thing, but I usually e.srcElement to make sure that the safari browser users will have my application working with them.
    //the e.target or e.srcElement is the HTML element that has been clicked, you can see that by "console.log(target);".
    target = target.parentNode;
    console.log(target);
    //this is what's called event bubbling, this code target.parentNode will move up inside the DOM to the parent of the clicked element, so from <button> to <div id="?"> Now we can see the parent element of the button.
    //if you need you can target.parentNode.parentNode.parentNode....etc as you need
    //see that in the console, use console.log(target); to see the output.
    const id = target.id;
    //here we're getting the ID of the element <div id="?">
    alert(id);
}

list.addEventListener("click", getTheID);
Mathew
  • 129
  • 9