I have this code is:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input id="addA" type="button" value="addA" />
<input id="addB" type="button" value="addB" />
<div id="TestPanel">
</div>
<script src="jquery-3.6.0.min.js"></script>
<script>
var p = $("#TestPanel");
$("#addA").on("click", function () {
p.append('<p class="EventA">from addA</p>');
});
$("#addB").on("click", function () {
p.append('<p class="EventB"> from addB</p > ');
});
////////////////////////////////////////////////////
p.on("click", ".EventA", function () {
alert("This element is created by A button");
});
p.on("click", ".EventB", function () {
alert("This element is created by B button");
});
</script>
</body>
</html>
My code in chrome or edge borwser browser,and open Devtool see dynamic p element event info,I get this picture situation.
chrome devTool screenshot
What is the situation and how to solve it.