How to dynamically rename an appended item of a list
Trying to change a name dynamically on a html list, my rename functions
works on the items that were already on the list, but doesn't work on the
appended items code is blow $(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>
Tips and help much appreciated
No comments:
Post a Comment