我尝试了什么this问题的答案说。这是我的代码:
$("document").ready(function() {
$("#add-receiver").on("click", function() {
$("#userlist").append("<li class=\"userlist-item\">user 1</li>");
});
$("#userlist li").on("click", '.userlist-item', function() {
alert($(this).text());
});
});.top-heading {
font-family: 'Lobster', cursive;
font-size: 50px;
text-align: center;
}
.input-boxes {
position: relative;
left: 35%;
top: 20px;
}
.button {
position: relative;
left: 30px;
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
}
input[type=text] {
width: 20%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid #555;
}
#userlist {
list-style-type: none;
width: 30%;
padding: 0;
margin: 0;
}
#userlist li {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 8px;
text-decoration: none;
font-size: 14px;
color: black;
display: block;
}
#userlist li:hover:not(.header) {
background-color: #eee;
}<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<h3 class="top-heading">Welcome
<%= data.username%>
</h3>
</div>
<div class="container">
<div class="input-boxes"><input type="text" name="names" id="names" placeholder="Enter Receiver Name"><button class="button" id="add-receiver">Add Receiver</button>
<ul id="userlist">
</ul>
</div>
<div class="input-boxes"><input type="text" name="names" id="message" placeholder="Enter Message"><button class="button" id="send">Send</button>
</div>
</div>
</body>
</html>首先单击添加接收器按钮。一个项目将被附加到用户列表中。当您单击此项目时，应该会出现一条警报，其中包含所单击项目的文本。
但是我的代码没有按预期工作。我找不到任何错误。请帮助我让这件事发挥作用。 谢谢!
最佳答案
当您委托(delegate)时，您需要从选择器中删除 li，因为您的第二个参数现在是被单击的对象
$("#userlist").on("click", '.userlist-item', function() {
console.log($(this).text());
});
$("document").ready(function() {
$("#add-receiver").on("click", function() {
$("#userlist").append("<li class=\"userlist-item\">user 1</li>");
});
$("#userlist").on("click", '.userlist-item', function() {
console.log($(this).text());
});
});.top-heading {
font-family: 'Lobster', cursive;
font-size: 50px;
text-align: center;
}
.input-boxes {
position: relative;
left: 35%;
top: 20px;
}
.button {
position: relative;
left: 30px;
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
}
input[type=text] {
width: 20%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid #555;
}
#userlist {
list-style-type: none;
width: 30%;
padding: 0;
margin: 0;
}
#userlist li {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 8px;
text-decoration: none;
font-size: 14px;
color: black;
display: block;
}
#userlist li:hover:not(.header) {
background-color: #eee;
}<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<h3 class="top-heading">Welcome
<%= data.username%>
</h3>
</div>
<div class="container">
<div class="input-boxes"><input type="text" name="names" id="names" placeholder="Enter Receiver Name"><button class="button" id="add-receiver">Add Receiver</button>
<ul id="userlist">
</ul>
</div>
<div class="input-boxes"><input type="text" name="names" id="message" placeholder="Enter Message"><button class="button" id="send">Send</button>
</div>
</div>
</body>
</html>关于javascript - 无法将单击事件添加到 jquery 中动态附加的列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61733110/