使用jquery动态生成链接的envent.target.id

Question

我生成了动态链接。意味着当用户单击国家链接时，将显示该国家的城市。我想要点击时动态生成的城市链接的envent.target.id

$(".countryName").children().on('click',()=>{

targetId=event.target.id;
if(targetId=="country1"){

$("#cityName").html("");
$("#cityName").append('<a id="city1">city1</a>');
$("#cityName").append('<a id="city2">city2</a>');
}
if(targetId=="country2"){

$("#cityName").html("");
$("#cityName").append('<a id="city3">city3</a>');
$("#cityName").append('<a id="city4">city4</a>');
}
});
$(".cityName").children().on('click',()=>{
alert(event.target.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="countryName" >
<a id="country1">country1</a>
<a id="country2">country2</a> 
</div>
<div class="cityName" id="cityName" >

</div>

Answer 1

动态生成的元素不会有任何事件绑定。要将任何事件与它们绑定，在DOM中创建并放置元素后，就必须绑定事件。

on()事件侦听器创建city元素并将其放置在DOM中。在侦听器的末尾，动态生成的子级将获得与它们的事件绑定。

若您只想绑定一次事件，而不是每次单击，您可以做一件事。您可以在DOM中创建并放置所有元素。并根据需要隐藏/展示它们。

$(".countryName").children().on('click', () => {
targetId = event.target.id;
if (targetId == "country1") {
$("#cityName").html("");
$("#cityName").append('<a id="city1">city1</a>');
$("#cityName").append('<a id="city2">city2</a>');
}
if (targetId == "country2") {
$("#cityName").html("");
$("#cityName").append('<a id="city3">city3</a>');
$("#cityName").append('<a id="city4">city4</a>');
}
$(".cityName").children().on('click', () => {
alert(event.target.id);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="countryName">
<a id="country1">country1</a>
<a id="country2">country2</a>
</div>
<div class="cityName" id="cityName">
</div>