使用 jquery 通过 id 引用附加的 HTML 代码
我在使用 .append("...") 时遇到问题。我正在编写一个简单的待办事项列表，并希望在通过引用按钮类单击附加的“删除”按钮时删除列表元素。
我认为它不起作用，因为 .append() 没有更改网站的 html 代码。至少在单击“添加项目”按钮后我无法发现差异。
你有什么想法？提前致谢！
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>
慕容7081504回答
-
明月笑刀无情
您需要使用事件委托。$(document).on("click",".deleteButton",function(e) { $(this).closest(".listelement").remove() });$(".deleteButton").click(function(e){仅适用于页面上存在的元素，不适用于新添加的元素。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猫小萌
如果您只想删除您单击的特定 div，可以使用以下代码。这里不需要匹配id。$(document).on("click",".deleteButton",function(e){ let parent = $(this).closest(".listelement"); parent.remove();}); 但是根据删除后的代码，如果添加某些内容，数组的所有数据都会显示。因为您没有从数组中删除数据。我认为您也需要从数组中删除该数据。$(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
如果您尝试使用 jQuery click() 方法对动态添加到 DOM 的元素执行某些操作，它将不起作用，因为它将单击事件仅绑定到绑定时存在的元素，您可以使用$(document).on("click", "button.deleteButton" , function() { $(this).parent().remove(); });https://jsfiddle.net/82d0e5at/3/ -
慕村9548890
这里的问题是附加的元素没有附加事件侦听器，当您调用它时，$(...).click它只会将事件侦听器附加到当前存在的元素。deleteButton由于您在文档加载时调用它，并且当时该类没有任何元素，因此它不会执行任何操作。您可以通过将删除代码移至其自己的函数并为您创建的每个新元素附加一个单击事件侦听器来解决此问题。为了有效地做到这一点，您需要获取正在创建的元素，您可以这样做：$(HTML Code).appendTo('#list').click(...);这将从您传递的 html 创建一个元素，将其附加到具有 id 的元素list并附加一个单击事件侦听器，因此最终结果如下：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>
随时随地看视频慕课网APP
相关分类
Html5