無法將點擊事件添加到 jquery 中的動態附加列表項
[英]Cannot add click event to dynamically appended list item in jquery
問題描述
我嘗試了這個問題的答案。 這是我的代碼：
$("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>
首先單擊添加接收器按鈕。 一個項目將附加到用戶列表。 當您單擊此項目時，應出現帶有單擊項目文本的警報。
但是我的代碼沒有按預期工作。 我沒有發現任何錯誤。 請幫助我讓這件事正常工作。 謝謝！
1 個解決方案
解決方案1
2 2020-05-11 15:23:07
您需要在委托時從選擇器中刪除 li，因為您的第二個參數現在是單擊的 object
$("#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>
jQuery，僅將click事件應用於每個項目的附加事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.