尝试在 html 列表上动态更改名称，我的重命名函数适用于列表中已有的项目，但不适用于附加的项目 我的代码如下:
$(document).ready(function() {
// Append items functions
$("#btn2").on('click', function () {
var name = $('#name').val();
$('<li>', {
text: name
}).appendTo('ol').append($('<button />', {
'class': 'btn3',
text: 'Remove'
})).append($('<button />',{
'class': 'btn4',
text: 'Rename'
}));
});
//delete items functions
$(document).on('click', 'ol .btn3', function () {
$(this).closest('li').remove();
});
//rename function
$(".btn4").on('click', function () {
var rename = "test"//$('#rename').val();
$(this).closest('li').after($('<li>', {
text: rename
}).appendTo('ol').append($('<button />', {
'class': 'btn3',
text: 'Remove'
})).append($('<button />',{
'class': 'btn4',
text: 'Rename'
}))).remove();
});
});
</script>
</head>
<body>
<div class = "container">
<ol>
<li>List item 1 <button class="btn3">remove</button><button class="btn4">rename</button></li>
<li>List item 2 <button class="btn3">remove</button><button class="btn4">rename</button></li>
<li>List item 3 <button class="btn3">remove</button><button class="btn4">rename</button></li>
</ol>
</div>
<input id = "name" type = "text"> <button id="btn2">Append list items</button>
</body>
非常感谢提示和帮助
最佳答案
您的问题区域是这样的，您的 .btn4 也是动态创建的，因此您需要使用委托(delegate)事件处理程序。
$(document).on('click', ".btn4", function () {
var rename = "test" //$('#rename').val();
$(this).closest('li').after($('<li>', {
text: rename
}).appendTo('ol').append($('<button />', {
'class': 'btn3',
text: 'Remove'
})).append($('<button />', {
'class': 'btn4',
text: 'Rename'
}))).remove();
});
如果 ol 不是在您的原始代码中动态生成的，您可以使用它们
$('ol').on('click', ".btn4", function () { ... }
<强> Demo
关于javascript - 如何动态重命名列表的附加项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19062384/