javascript - 遍历后的JQuery不监听点击

Question

我使用 Jquery 从网站加载报告并将其遍历到该网站。一切都很好，但在第一个报告加载到 div 后，将不会监听所遍历 Material 的任何进一步事件。请帮忙!

JavaScript 代码:

<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代码:

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

func.php代码:

// 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>';

}

所以基本上这就是问题所在。页面加载并显示“这是内容开始的地方”，没有任何问题。然后我们单击“单击此处获取报告”，报告会在 div id="response"中正常弹出。 div 内的新 html 有一个记录列表，并包含另一个 class="edit"的列表。问题是从数据库中提取的数据打印到屏幕上后，用户想要通过按打印的每一行上的“修改此记录”来修改记录。 JavaScript 监听器不会监听对遍历数据的这些点击，因此浏览器不会采取任何操作。

问题是如何让 jquery 监听新打印数据遍历后的点击情况。这是针对一个必须从 mysql 数据库获取数据并在屏幕上打印后，然后将其修改并更新到 mysql 数据库的项目。

感谢您的回复!

Answer 1

您需要将事件附加到静态父元素。

尝试类似的事情

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

or

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