JS events. Only one of the event handler function is being called?

Question

Hi everybody!
I have a problem and I have no idea how to fix it!

I have a simple HTML page with a button:

<input type = "submit" value = "ok" onclick="f1()"/>

I also have a script on this page:

<script>    
function f2()    
{           
   var firstBtn = document.createElement("button");         
   firstBtn.appendChild(document.createTextNode("firstBtn"));
   document.body.appendChild(firstBtn);
   var xmlhttp = CreateRequest();
   xmlhttp.onreadystatechange=function()
   {
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
         var response = xmlhttp.responseText;               
         document.body.innerHTML += response;
       }
   }
   firstBtn.onclick = function()
   {
     alert("inside f2 onclick");
     xmlhttp.open("GET","test.php",true);
     xmlhttp.send();
   }

}    
function f3()  
{  
   var secondBtn = document.createElement("button");            
   secondBtn.appendChild(document.createTextNode("secondBtn"));       
   document.body.appendChild(secondBtn);
   var xmlhttp = CreateRequest();
   xmlhttp.onreadystatechange=function()
   {
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
         var response = xmlhttp.responseText;               
         document.body.innerHTML += response;
       }
   }
   secondBtn.onclick = function()
   {
     alert("inside f3 onclick");
     xmlhttp.open("GET","test.php",true);
     xmlhttp.send();
   }
}  
function f1()    
{  
  f2();  
  f3();  
}  
function CreateRequest()
{
    var xmlhttp;
    if (window.XMLHttpRequest)              
        xmlhttp=new XMLHttpRequest();// code for IE7+, Firefox, Chrome, Opera, Safari       
    else                    
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// code for IE6, IE5 

    return xmlhttp;
}
</script>

So now, when I click one of the buttons (firstBtn or secondBtn), another one is not responding to the click event! Does anybody know why?

Seems like a scope problem on xmlhttp variables inside click handlers. — Volkan, May 04 '13 at 10:17
What do you want to do? Are both of the buttons need to launch the sam e function? — Ivan Chernykh, May 04 '13 at 10:28
I don't know what exactly you are trying to say. I tried above code in jsfiddle http://jsfiddle.net/pTvhE/ and it works good. Means both buttons respond to click event as expected. — Vishwanath, May 04 '13 at 10:36
Try doing your script include after the button html. That should work. I updated jsfiddle http://jsfiddle.net/pTvhE/1/ to add the onclick from js and it worked. — Vishwanath, May 04 '13 at 10:42
@vishwanath I'm trying to say that when you click button "ok" you will get two other buttons - firstBtn and secondBtn, but if you will click firstBtn you will see alert box (inside f2 onclick) and after that if you will click secondBtn you will get nothing.. sorry for my english! — Art713, May 04 '13 at 10:44
well that's not happening, you can check it here http://jsfiddle.net/pTvhE — Vishwanath, May 04 '13 at 10:49
@vishwanath Yes, this works fine in jsfiddle.net, I guess it because you can't include php script there. But this doesn't work for me! — Art713, May 04 '13 at 10:57
Found the Answer. http://stackoverflow.com/questions/5113105/manipulating-innerhtml-removes-the-event-handler-of-a-child-element — Vishwanath, May 04 '13 at 11:07
You are doing += with body innnerHTML, which is the cause of losing events. — Vishwanath, May 04 '13 at 11:09

score 0 · Accepted Answer · answered Oct 17 '13 at 06:31

0

As @vishwanath said (see comments to this question), when I doing

 document.body.innerHTML += response;

I'm destroying and recreating all the content of my page therefore I'm losing my events.

answered Oct 17 '13 at 06:31

Art713

485
4
14

JS events. Only one of the event handler function is being called?

1 Answers1