why onclick handler didnt work when it use with innerHTML in javascript

Question

<html>
<head>
<script>
window.onload = function(){
    var para = document.createElement("p");
    para.innerHTML = "aaaa";
    document.body.appendChild(para);

    var bspan = document.createElement("span");
    bspan.innerHTML = "bbbb";
    para.appendChild(bspan);

    bspan.onclick = function(){
       alert("hi");
    }
    para.innerHTML += "cccc";
}
</script>
</head>
<body>
</body>
</html>

This is my code, I expect it to alert hi when I clicked on bbbb, but it obviously not functioning, why?

If you comment the `para.innerHTML += "cccc"`, it works. I wanted to throw that out there for your information. I'm still working this. — Mike Marks, Mar 12 '14 at 16:31

score 4 · Accepted Answer · answered Mar 12 '14 at 16:27

4

Since you're not using jQuery, Here is the simple example of event delegation using javascript as your span element is generated from code so give this a try:

document.onclick = function(event) {
  var el = event.target;
  if (el.nodeName.toLowerCase() == "span") {
    alert("hi");
  }
};

Fiddle

answered Mar 12 '14 at 16:27

Dhaval Marthak

16,632
6
39
66

can i know why my code dont work?? – dramasea Mar 12 '14 at 16:31
It is because you are creating `span` at runtime. [Here](http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) is the valuable post to understand it. – Dhaval Marthak Mar 12 '14 at 16:33
1

@DhavalMarthak, if you comment out the `para.innerHTML += "cccc";`, then it works. Do you know why this is? – Mike Marks Mar 12 '14 at 16:36
I have the same question with @MikeMarks – dramasea Mar 12 '14 at 16:38
A stronger hint would be that `para.innerHTML += "cccc"` is actually a shorthand for `para.innerHTML = para.innerHTML + "cccc"`. If you take a look at `para.innerHTML` before you try to change it, you might figure out why this line drops your event handler. – Steve Howard Mar 12 '14 at 16:43
@MikeMarks Let's say the browser creates dom objects/Text from innerHTML and after that you add a listener to that dom element. That's why we are delegating the event :) Hope this is clear! – Dhaval Marthak Mar 12 '14 at 16:47
@SteveHoward sorry I still can't get it – dramasea Mar 12 '14 at 16:47
@DhavalMarthak ur method is fine for my code, but if i want to add another span and when i click on that span it will alert hi too – dramasea Mar 12 '14 at 17:02
@dramasea You may check for the className or ID along with nodeName according to your need. E.G. `if (el.nodeName.toLowerCase() == "span" && el.className == "myClass")` – Dhaval Marthak Mar 12 '14 at 17:05
@dramasea can you mark the answer as accepted if it's helful to you? – Dhaval Marthak Mar 12 '14 at 19:06

score 2 · Answer 2 · answered Mar 12 '14 at 16:19

2

short answer, the error i get is Uncaught ReferenceError: spa is not defined, so you need to define spa first.

answered Mar 12 '14 at 16:19

Zach Spencer

1,789
13
21

corrected but still didnt work – dramasea Mar 12 '14 at 16:23
it is, his question is why is it not functioning. Not sure why the downvote. – Zach Spencer Mar 12 '14 at 16:38
@ZachSpencer, did you really not know that he meant `bspan`? I don't know, I saw what you saw and immediately knew that's what he meant, but if you didn't, you know, that explains your answer. – Mike Marks Mar 12 '14 at 17:30
@Mike Why does need to be hashed out? Why should I assume that `spa` was a typo? You need to let this one go Mike, its one answer out of millions. – Zach Spencer Mar 12 '14 at 17:41
@ZachSpencer - It needs to be hashed out because if you knowingly understood (or at least had a decent idea) what he really meant yet you put this as the answer just to be facetious, it's not exactly answering his question, though sure, technically this is an answer - it just came across as you didn't really pay attention to his question, or you're just trying to be a smart ass. It doesn't take a genius to figure out what he meant, and this answer wasn't exactly the most thought out. Understand the root of the question before posting an answer like this. – Mike Marks Mar 12 '14 at 19:12

why onclick handler didnt work when it use with innerHTML in javascript

2 Answers2