"Home "触发了该函数，但 "Dynamic Link "没有。
<head>
<script>
window.onload = function()
{
var writeNav = writeNav + "<li class='nav-item'> <a class='nav-link' href='#'><span>Dynamic Link</span></a></li>"
$("#writeNav").append(writeNav);
};
</script>
<script>
$(document).ready(function(){
$('.nav-link').on("click", function(){
alert('click function was called.');
});
});
</script>
</head>
<body>
<ul id="writeNav" class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#">
<span>Home</span>
</a>
</li>
</ul>
</body>
似乎写了同样的标记，但.click()对附加项不起作用。
不知道为什么。 求助于我？
你可以通过在父元素中添加点击事件监听器来解决，而不是将其添加到仅有的现有元素中，所以每次添加新元素时，你需要单独为其添加事件监听器
var x = 1;
var navElement = document.querySelector("#writeNav");
document.querySelector("button").onclick = function() {
navElement.innerHTML += `<li class='nav-item'> <a class='nav-link' href='#'><span>Dynamic Link${x++}</span></a></li>`;
}
navElement.onclick = function(e) {
if(e.target.nodeName === "SPAN") {
alert(e.target.textContent + ': click function was called.');
}
}<button>add Link</button>
<ul id="writeNav" class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="#">
<span>Home</span>
</a>
</li>
</ul>