Add onclick event to newly added element in JavaScript

Question

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    lt button onclick add img   gt add image lt  button gt    Now the image draws perfectly inside the browser  But when I click the image I don t get that alert

User · Answer

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

User · Answer

You can also set attribute   elem setAttribute  onclick   alert  blah

User · Answer

onclick should be set to a function instead of a string  Try  elemm onclick   function     alert  blah         instead

User · Answer

I don t think you can do that this way  You should use    void addEventListener     in DOMString type     in EventListener listener     in boolean useCapture        Documentation right here

User · Answer

cant say why  but the es5 6 syntax doesnt work  elem onclick    ev    gt   console log this    not working  elem onclick   function ev   console log this     working

User · Answer

Not sure but try    elemm addEventListener  click   function    alert  blah      false

User · Answer

You have three different problems  First of all  values in HTML tags should be quoted  Not doing this can confuse the browser  and may cause some troubles  although it is likely not the case here   Second  you should actually assign a function to the onclick variable  as someone else meantioned  Not only is this the proper way to do it going forward  but it makes things much simpler if you are trying to use local variables in the onclick function  Finally  you can try either addEventListener or jQuery  jQuery has the advantage of a nicer interface   Oh  and make sure your HTML validates  That could be an issue

User · Answer

you can t assign an event by string  Use that   elemm onclick   function    alert  blah

User · Answer

JQuery   elemm attr  onclick    yourFunction this       or   elemm attr  onclick    alert  Hi

User · Answer

In case you do not want to write all the code you have once written in the function you called  Please use the following code  using jQuery        element  on  click   function      add img

[javascript] Add onclick event to newly added element in JavaScript

Examples related to javascript

Examples related to events

Examples related to new-operator

Examples related to element

Examples related to add