Event delegation in javascript

Question

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>

<body>
<div id="print_data"></div>
<input type="text" id="name" placeholder="name">
<input type="text" id="title" placeholder="title">
<input type="text" id="email" placeholder="email">
<input type="submit" id="submit" value="submit">

<script type="text/javascript"> 
var submit = document.getElementById("submit");
var printdata = document.getElementById("print_data");
 

submit.onclick = function(){
var name = document.getElementById("name").value; 
var title = document.getElementById("title").value;
var email = document.getElementById("email").value;
$.ajax({
  type: 'POST',
  url: 'http://rest.learncode.academy/api/sumit/friend',
  data: {name:name, title: title, email:email},
  success: function(data) {
  }
}); 
}


$.ajax({
  type: 'GET',
  url: 'http://rest.learncode.academy/api/sumit/friend',
  success: function(data) {  
   var vals ="";
   for(var i=0; i<data.length; i++){
    var obj = data[i];
    vals += '<ul><li>'+obj.name+'</li><li>'+obj.title+'</li><li>'+obj.email+'</li><li><input type="submit" class="del" value="X" id="'+obj.id+'"></li><li><input type="submit" class="edit" value="edit" id="'+obj.id+'"></li></ul>'
    printdata.innerHTML =  vals;
   }
  }
}); 
 

 
document.addEventListener("DOMContentLoaded", function(event) { 
alert('hi');
var edit = document.getElementsByClassName("edit"); 
for(var i=0; i<edit.length; i++){
edit[i].addEventListener('click', function(){
alert(this.getAttribute("id"));
})  
};  
});
   
</script>
</body>
</html>

I have generated a bunch of input type dynamically by ajax.But my problem is my script execute first then my dom loaded. So it's not working, for the time being I have execute that code by setTimeout function. But I didnt want that I want a real fix. Thanks. sample code given below:

var edit = document.getElementsByClassName("edit");  for(var i=0; i<edit.length; i++){ edit[i].addEventListener('click', function(){ alert(this.getAttribute("id")); }) };

Related: https://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery — Caramiriel, Sep 03 '17 at 15:35

score 0 · Answer 1 · answered Sep 03 '17 at 15:45

0

Wait for the DOMContentLoaded event:

document.addEventListener("DOMContentLoaded", function(event) { 
  // your code here.
});

answered Sep 03 '17 at 15:45

UncleDave

5,609
1
21
41

Thanks, but its fire before the page load – user8555208 Sep 03 '17 at 16:04
Is your Javascript at the bottom of your ``? If you could post your entire HTML page that would be useful. – UncleDave Sep 03 '17 at 16:14
Perhaps the issue is that your AJAX calls are getting a response before the DOM has loaded. Try wrapping ALL your code in the `DOMContentLoaded` event handler (or since you're using jQuery you can also use `$(document).ready(function () { // your code })` – UncleDave Sep 03 '17 at 16:38
yes I know I'm using jquery ajax but i dont want to use jquery. I want to do it by javascript. and as per your concern I have already use DOMContentLoaded as a wrapper of all of my code but the result was same. – user8555208 Sep 03 '17 at 16:46

Event delegation in javascript

1 Answers1