请教各位老师，jQuery 给动态添加的元素元素加点击事件的问题，就是$(this)当前高亮，连续点击都成高亮了。跪求解决……
代码如下:
<pre>
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>jquery解析xml</title>
<script src="ITlink/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.post('books.xml',function(data){
//查找所有的book节点
var x="";
$(data).find('book').each(function(i){
var id=$(this).attr('id');
var name=$(this).children('name').text();
var author=$(this).children('author').text();
var price=$(this).children('price').text();
x+="<tr><td>"+id+"</td><td> "+name+" </td><td>"+author+" </td><td>"+price+"</td></tr>";
});
$("table").append(x);
});
$("body").on("click", "#mytable tr", function () {
$(this).css("color","red");
});
});
</script>
<style type="text/css">
table{border-collapse:collapse;margin: 0 auto 15px auto;width:98%;background:#FFFBE3;color:#333;
border-bottom: 1px solid #666;border-left:1px solid #666;
}
table tr:first-child{background: #666;color:#fff;height:26px;}
td{font-size:8px;padding: 0;
border-top: 1px solid #666;border-right: 1px solid #666;
}
</style>
</head>
<body>
<table id='mytable'></table>
</body>
</html>
</pre>
代码如下:
<pre>
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>jquery解析xml</title>
<script src="ITlink/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.post('books.xml',function(data){
//查找所有的book节点
var x="";
$(data).find('book').each(function(i){
var id=$(this).attr('id');
var name=$(this).children('name').text();
var author=$(this).children('author').text();
var price=$(this).children('price').text();
x+="<tr><td>"+id+"</td><td> "+name+" </td><td>"+author+" </td><td>"+price+"</td></tr>";
});
$("table").append(x);
});
$("body").on("click", "#mytable tr", function () {
$(this).css("color","red");
});
});
</script>
<style type="text/css">
table{border-collapse:collapse;margin: 0 auto 15px auto;width:98%;background:#FFFBE3;color:#333;
border-bottom: 1px solid #666;border-left:1px solid #666;
}
table tr:first-child{background: #666;color:#fff;height:26px;}
td{font-size:8px;padding: 0;
border-top: 1px solid #666;border-right: 1px solid #666;
}
</style>
</head>
<body>
<table id='mytable'></table>
</body>
</html>
</pre>
