JQuery after traversal not listening for click

Question

Im using Jquery to load reports from a website and traverse them to the site. Everything works great but after the first report is loaded into the div any further events on the traversed material wont be listened to. Please help!

javascript code:

<script>
$(function(){

function call_php(str,str2) {

    if(window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} // end xml request object else
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("response").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","func.php?f="+str+"&s="+str2,true)
xmlhttp.send();
}

// listener for class edit
$('.edit').on('click',function(){ 

var mon1 = $('#sel_mon').valueOf();
var yr1 = $('#sel_yr').valueOf();
var mon = mon1+' '+yr1;

call_php(action,mon);

});

});

html code:

<div id="response"> Here is where the content begins</div>
<ul class="edit">Click here for report</ul>

func.php code:

// connect to DB
// Run query
// handle results
while($stmt->fetch()){
echo '<tr><td>'.$name.'</td><td>'.$age.</td><td><ul class="edit">
Modify this record</td></tr>';

}

So basicly here is the issue. Page loads up and has " Here is where the content begins" with no issues. Then we click on "Click here for report" and the report pops up fine in the div id="response". The new html inside the div has a list of records and includes another with class="edit". The problem is after the data that was pulled from the database is printed to the screen then the user wants to modify the record by pressing on the "modify this record" that is on each line printed. The javascript listener isnt listening to these clicks on the traversed data so no action is taken by the browser.

Question is how do I get jquery to listen to the clicks on the new printed data after it has been travesed. This is for a project that has to get data from a mysql database and after it is printed on the screen then it should be modified and updated to the mysql database.

Thanks for your replies!

Answer 1

You need to attach your event to a static parent element.

Try somthing like

$("#response").on("event","domElement", function(){
Your stuff...
});

or

 $("#response").on("click",".edit", function(){
Your stuff...
});