我在使用 .append("...") 時(shí)遇到問(wèn)題。我正在編寫(xiě)一個(gè)簡(jiǎn)單的待辦事項(xiàng)列表，并希望在通過(guò)引用按鈕類單擊附加的“刪除”按鈕時(shí)刪除列表元素。我認(rèn)為它不起作用，因?yàn)?.append() 沒(méi)有更改網(wǎng)站的 html 代碼。至少在單擊“添加項(xiàng)目”按鈕后我無(wú)法發(fā)現(xiàn)差異。你有什么想法？提前致謝！var inputText;var itemList = [];$("#addButton").click(function(){ inputText = $("#textInput").val(); itemList.push(inputText); $("#textInput").val(""); showItems();});//not working$(".deleteButton").click(function(e){ console.log("test"); var className = e.attr("id"); console.log("ID:" + className);});function showItems(){ $("#list").html(''); for(var i=0; i<=itemList.length-1; i++){ $("#list").append('<div class="listelement"><p type="text" class="listItem" id="listItem '+ i +'">'+ itemList[i] +'</p> <button type="button" class="deleteButton" id="'+ i +'">REMOVE</button><div>'); }} <body> <div class="container"> <div class="headline"> <h1 id="headline">TO DO LIST</h1> </div> <div class="userInput"> <input type="text" id="textInput"> <button type="button" id="addButton">ADD ITEM</button> </div> <div class="list" id="list"> <div class="listelement" id="listelement"> </div> </div> </div> <script src="jquery-3.4.1.min.js"></script> <script src="script.js"></script> </body></html>
4 回答
明月笑刀無(wú)情
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊
您需要使用事件委托。
$(document).on("click",".deleteButton",function(e) {
$(this).closest(".listelement").remove()
});$(".deleteButton").click(function(e){僅適用于頁(yè)面上存在的元素，不適用于新添加的元素。
var inputText;
var itemList = [];
$("#addButton").click(function() {
inputText = $("#textInput").val();
itemList.push(inputText);
$("#textInput").val("");
showItems();
});
//not working
$(document).on("click",".deleteButton",function(e) {
$(this).closest(".listelement").remove()
});
function showItems() {
$("#list").html('');
for (var i = 0; i <= itemList.length - 1; i++) {
$("#list").append('<div class="listelement"><p type="text" class="listItem" id="listItem ' + i + '">' + itemList[i] + '</p> <button type="button" class="deleteButton" id="' + i + '">REMOVE</button><div>');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="headline">
<h1 id="headline">TO DO LIST</h1>
</div>
<div class="userInput">
<input type="text" id="textInput">
<button type="button" id="addButton">ADD ITEM</button>
</div>
<div class="list" id="list">
<div class="listelement" id="listelement">
</div>
</div>
</div>
Smart貓小萌
TA貢獻(xiàn)1911條經(jīng)驗(yàn) 獲得超7個(gè)贊
如果您只想刪除您單擊的特定 div，可以使用以下代碼。這里不需要匹配id。
$(document).on("click",".deleteButton",function(e){
let parent = $(this).closest(".listelement");
parent.remove();
});
但是根據(jù)刪除后的代碼，如果添加某些內(nèi)容，數(shù)組的所有數(shù)據(jù)都會(huì)顯示。因?yàn)槟鷽](méi)有從數(shù)組中刪除數(shù)據(jù)。我認(rèn)為您也需要從數(shù)組中刪除該數(shù)據(jù)。
$(document).on("click",".deleteButton",function(e){
let parent = $(this).closest(".listelement");
let id = $(this).attr("id");
console.log(id);
itemList.splice(id, 1);
parent.remove();
});
慕姐8265434
TA貢獻(xiàn)1813條經(jīng)驗(yàn) 獲得超2個(gè)贊
如果您嘗試使用 jQuery click() 方法對(duì)動(dòng)態(tài)添加到 DOM 的元素執(zhí)行某些操作，它將不起作用，因?yàn)樗鼘螕羰录H綁定到綁定時(shí)存在的元素，您可以使用
$(document).on("click", "button.deleteButton" , function() {
$(this).parent().remove();
});https://jsfiddle.net/82d0e5at/3/
慕村9548890
TA貢獻(xiàn)1884條經(jīng)驗(yàn) 獲得超4個(gè)贊
這里的問(wèn)題是附加的元素沒(méi)有附加事件偵聽(tīng)器，當(dāng)您調(diào)用它時(shí)，$(...).click它只會(huì)將事件偵聽(tīng)器附加到當(dāng)前存在的元素。deleteButton由于您在文檔加載時(shí)調(diào)用它，并且當(dāng)時(shí)該類沒(méi)有任何元素，因此它不會(huì)執(zhí)行任何操作。
您可以通過(guò)將刪除代碼移至其自己的函數(shù)并為您創(chuàng)建的每個(gè)新元素附加一個(gè)單擊事件偵聽(tīng)器來(lái)解決此問(wèn)題。
為了有效地做到這一點(diǎn)，您需要獲取正在創(chuàng)建的元素，您可以這樣做：
$(HTML Code).appendTo('#list').click(...);
這將從您傳遞的 html 創(chuàng)建一個(gè)元素，將其附加到具有 id 的元素list并附加一個(gè)單擊事件偵聽(tīng)器，因此最終結(jié)果如下：
var inputText;
var itemList = [];
$("#addButton").click(function() {
inputText = $("#textInput").val();
itemList.push(inputText);
$("#textInput").val("");
showItems();
});
function deleteItem(e) {
console.log(e.target.id);
}
function showItems() {
$("#list").html('');
for (var i = 0; i <= itemList.length - 1; i++) {
var html = '<div class="listelement"><p type="text" class="listItem" id="listItem ' + i + '">' + itemList[i] + '</p> <button type="button" class="deleteButton" id="' + i + '">REMOVE</button><div>';
$(html).appendTo('#list').click(deleteItem);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="headline">
<h1 id="headline">TO DO LIST</h1>
</div>
<div class="userInput">
<input type="text" id="textInput">
<button type="button" id="addButton">ADD ITEM</button>
</div>
<div class="list" id="list">
<div class="listelement" id="listelement">
</div>
</div>
</div>
- 4 回答
- 0 關(guān)注
- 229 瀏覽
添加回答
舉報(bào)
0/150
提交
取消