Fire onclick event on the element created by javascript using element.innerHTML

Question

I'm creating a delete button by javascript using this code:

btnclick = '<button class="deleteMe">' + 'X' + '</button>';
output.innerHTML = "whatever" + btnclick;

How do I fire onclick function on this button? Right now I'm doing something like this:

$(document).ready(function() {
  $(".deleteMe").on("click", function(){
    alert("clicked");
  });
});

And I'm not getting any alert message on button click.

This will helps you https://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements — Hamza Haider, Jan 02 '19 at 08:01

score 0 · Accepted Answer · edited Jan 03 '19 at 04:30

0

suppose you have div as output,

you can simply append the button in your div and execute the function

$('#output').append('whatever  <button class="deleteMe">x</button>');
$(document).ready(function(){ 
  $('body').on('click','.deleteMe',function(){ 
    alert('delete button clicked!!!');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output"></div>

edited Jan 03 '19 at 04:30

AkKi

212
2
9

answered Jan 02 '19 at 08:05

Thankyou, it helped me. But can you please tell me why did you use output.append and how did it make a difference And why was it not working while I was using output.innerHTML – Ayushi Sood Jan 02 '19 at 08:46
.append is a Jquery function, I don't know what is output in your scenerio like (div, body, span) and if you want to use innerHTML here use like `output[0].innerHTML` – Jan 02 '19 at 08:50
if you understood, do upvote my answer – Jan 02 '19 at 10:05
Jquery event listeners don't work on dynamic elements. You can use below syntax for adding event listener to a dynamic element : $(document).ready(function(){ $("body").on("click",".deleteMe", function(){ alert("clicked"); }); }); – AkKi Jan 02 '19 at 10:07
@AkKi the above code is working fine – Jan 02 '19 at 10:20
@MumbaiWadala Yes, but we don't need extra variable (output in your case) with the syntax that I've provided above. – AkKi Jan 02 '19 at 10:27
Thanks @AkKi somehow the above code is working fine and your code too seems good to me – Ayushi Sood Jan 02 '19 at 10:28
so you can simply delete the variable after appending – Jan 02 '19 at 10:30
and you do need extra variable to append the div – Jan 02 '19 at 10:32
@MumbaiWadala what is the point of creating a variable and deleting it when the task can be accomplished without even creating an extra variable? We all are developers and code optimisation should be our priority :) – AkKi Jan 02 '19 at 10:33
thankyou @AkKi this works great as well. – Ayushi Sood Jan 02 '19 at 10:33
$(document).ready(function() { $("#outputDiv").append(""); $(".deleteMe").on("click", function(){ alert("clicked"); }); }); – AkKi Jan 02 '19 at 10:36
@AkKi updated my answer, have a look – Jan 02 '19 at 11:15
1

This solution will not work. Please update your answer as follows : $('#output').append('whatever '); $(document).ready(function(){ $('body').on('click', '.deleteMe',function(){ alert('delete button clicked!!!'); }); }); – AkKi Jan 02 '19 at 15:25
Upvote my comment if you find this working! – AkKi Jan 02 '19 at 15:29

Fire onclick event on the element created by javascript using element.innerHTML

1 Answers1