Add onclick event to newly added element in JavaScript

javascript add onclick event dynamically
javascript click button by id
event binding on dynamically created elements javascript
javascript onclick href
onclick javascript
how to call javascript function on button click in html
add onclick event javascript
onclick css

I have been trying to add onclick event to new elements I added with JavaScript.

The problem is when I check document.body.innerHTML I can actually see the onclick=alert('blah') is added to the new element.

But when I click that element I don't see the alert box is working. In fact anything related to JavaScript is not working..

here is what I use to add new element:

function add_img() { 
  var elemm = document.createElement('rvml:image'); 
  elemm.src = 'blah.png';
  elemm.className = 'rvml';
  elemm.onclick = "alert('blah')";
  document.body.appendChild(elemm);
  elemm.id = "gogo";
  elemm.style.position='absolute';
  elemm.style.width=55;
  elemm.style.height=55;
  elemm.style.top=200;
  elemm.style.left=300;
  elemm.style.rotation=200; 
}

Here is how I call this function:

<button onclick=add_img()>add image</button>

Now the image draws perfectly inside the browser. But when I click the image I don't get that alert.

.onclick should be set to a function instead of a string. Try

elemm.onclick = function() { alert('blah'); };

instead.

Add onclick event to newly added element in JavaScript, the 'whenClicked' attribute, while being careful to spell the 'whenClicked' correctly, and input your desired code to the value - will it be analytics code or your custom code. Attach onClick event on all the elements that have a class ‘btn’. Get and display the ‘id’ of the element that is clicked using javascript. Get and display the ‘rel’ attribute of an element that is clicked using javascript. Add a class ‘clicked’ to the element that is clicked using javascript.

Not sure but try :

elemm.addEventListener('click', function(){ alert('blah');}, false);

Attaching event handlers to dynamically created JavaScript elements, .onclick should be set to a function instead of a string. Try elemm.onclick = function() { alert('blah'); };. instead. If you try to do something with the elements that are dynamically added to DOM using the jQuery click() method it will not work, because it bind the click event only to the elements that exist at the time of binding. To bind the click event to all existing and future elements, use the jQuery on() method.

You can also set attribute:

elem.setAttribute("onclick","alert('blah');");

onclick Event, Attaching event handlers to dynamically created JavaScript elements could click on to toggle/add a class name, when a new element is created and To create an onclick function is simple, we just target our element, and  This tutorial is going to cover a pure JavaScript way of dynamically attaching event handlers to newly created elements, so they merge in seamlessly with your other elements. Table of contents Creating some markup

you can't assign an event by string. Use that:

elemm.onclick = function(){ alert('blah'); };

Onclick Event, The onclick event occurs when the user clicks on an element. myFunction toggles between adding and removing the show class, which is used to hide and​  How do I add an onclick event to a tag in HTML programmatically? I want to be able to click a link, and have an onclick event attached to a javascript function take effect on another tag. Here

Short answer: you want to set the handler to a function:

elemm.onclick = function() { alert('blah'); };

Slightly longer answer: you'll have to write a few more lines of code to get that to work consistently across browsers.

The fact is that even the sligthly-longer-code that might solve that particular problem across a set of common browsers will still come with problems of its own. So if you don't care about cross-browser support, go with the totally short one. If you care about it and absolutely only want to get this one single thing working, go with a combination of addEventListener and attachEvent. If you want to be able to extensively create objects and add and remove event listeners throughout your code, and want that to work across browsers, you definitely want to delegate that responsibility to a library such as jQuery.

Adding onclick event to element BEFORE appending to the DOM , The onclick event in JavaScript lets you as a programmer execute a function The onclick event can also be programmatically added to any element using the It's important to note that using onclick we can add just one listener function. The jQuery .on() method is the recommended way for attaching events to any DOM element. This method attaches event handlers to a selected set of elements and it works perfectly for elements present on the page. However, there is an issue with the .on() method which inhibits the attachment of events to dynamically added elements.

How to Bind Click Event to Dynamically Created Elements in jQuery, Hi there, I never learned javascript before I got into jQuery, so I've decided to use innerHTML = "My shiny new span element"; elem.onclick = function(){ alert('Hi! Do I really have to add the click event AFTER the element has been added to  Add an Event Handler to the window Object. The addEventListener() method allows you to add event listeners on any HTML DOM object such as HTML elements, the HTML document, the window object, or other objects that support events, like the xmlHttpRequest object.

Add onClick event dynamically using javascript, How to bind click event to dynamically created HTML elements in jQuery. Topic: JavaScript <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>; <script> <p>Click the above button to dynamically add new list items. You can​  Because the event is tied to each matching element in the document ready. Any new elements added do NOT automatically have the same events tied to them. You will have to manually bind the event to any new element, after it is added, or use the live listener.

.click(), Attach onClick event on all the elements that have a class 'btn'; Get and Add a class 'clicked' to the element that is clicked using javascript  In the onclick event of the href of the link or button, call the JavaScript AppendRow() function and it will add controls dynamically in the page. Javascript to Add Rows and Controls The required code is attached with this article.

Comments
  • Oh the beauty of jQuery. Maybe this will be helpful in the future :) $('.rvml').live('click', function() { alert(1); });
  • Even with .addEventListener the 2nd argument still needs to be a function not a string.
  • Using jQuery I didn't remember this one ;) Thanks
  • I need this only for internet explorer.. the short one works like charm. thanks for the detailed solution though
  • I'm using this locally. so It wont be a problem for me.. about jQuery I didn't like because I cannot take control of everything and its just messy with lots of codes and it impacts with other javascript libraries. I would prefer to build my own library rather than wasting my time to figure out how to use jQuery. thanks for your help though :)
  • That code should throw loud warnings to you. Also, can you add some explanation to it such that others can learn from it? What does elem contain?
  • And if you've read the most upvoted answer, you would also have written code using an anonymous function to avoid just this problem