CODEWITHSUNDEEP
javascripthtmlfunctionelement
xoomer
xoomer

Reputation: 321

How to add a function on an element that was made after DOM creation?

I have a function that creates an html element with an unique ID.

And after that I want that when I click this element I could call a new function.

Quick example:

1) I click a button "Create element";

2) An element is created with id of "New_Element";

3) I click the "New_Element";

4) I get a function that was already preset to this element.

My current code for creating an element. 

var pageRows = document.getElementsByClassName('pageRows');
var pageRowID = "section";

var el = document.createElement('section');

el.setAttribute('id', pageRowID + pageRows.length);

var row = document.getElementById('allNewRows');
row.parentNode.appendChild(el);

el.innerText = "New " + pageRows.length + " ROW!";

Now that the Element of id "pageRowId0" is created I want to have a function that works when I click this element.

Best wishes. Thanks for helping.

Upvotes: 0

Views: 273

Answers (3)

GolezTrol
GolezTrol

Reputation: 116140

The snippet below has two parts. The first piece of code allows you to add a bunch of elements with different texts to the document.

The second parts shows the text of the element you clicked.

You will notice that the click event handler is just assigned to the parent element in which the new elements are added. No explicit click event handlers are bound to the new element.

I like to use addEventListener, because I think it's better to add a listener for a specific goal than to override any other event listeners by bluntly setting 'onclick', but that's a matter of opinion.

// Only run this code when the DOM is loaded, so we can be sure the proper elements exist.
window.addEventListener('DOMContentLoaded', function(){

  // The code to add an element when the add button was clicked.
  document.getElementById('add').addEventListener('click', function() {
    var element = document.createElement('div');
    element.innerText = document.getElementById('text').value;
    element.className = 'clickableElement';
    document.getElementById('elements').appendChild(element);
  });
   
  // Click event handler for the 'elements' div and everything in it.
  document.getElementById('elements').addEventListener('click', function(event) {
    var target = event.target; // The element that was clicked
    
    // Check if the clicked element is indeed the right one.
    if (target.classList.contains('clickableElement')) {
      alert(target.innerText);
    }
  });
  
})
<input id="text" value="test"><button id="add">add</button>
<div id="elements"></div>

Upvotes: 0

Joy Biswas
Joy Biswas

Reputation: 6527

You can do element.onclick= function(){}

var pageRows = document.getElementsByClassName('pageRows');
var pageRowID = "section";

var el = document.createElement('section');

el.setAttribute('id', pageRowID + pageRows.length);
el.onclick = function(){
   /*write your fn here*/
};

var row = document.getElementById('allNewRows');
row.parentNode.appendChild(el);

el.innerText = "New " + pageRows.length + " ROW!";

Upvotes: 1

jcubic
jcubic

Reputation: 66590

You can use event delegation:

var row = document.getElementById('allNewRows');
row.parentNode.onclick = function(e) {
   if (e.target.nodeName.toLowerCase()  == 'select') {
       //click on target select element
   }
};

Upvotes: 0

Related Questions