如何动态重命名列表的追加项

How to dynamically rename an appended item of a list

本文关键字：列表 追加 重命名 何动态 动态      更新时间：2023-09-26

尝试动态更改 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也是动态创建的，因此您需要使用委托的事件处理程序。

 $(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 () { ... }

演示

我认为你想要的是"事件委派"。在jQuery中，这意味着使用

$('window').on('click', 'li', function () { ... });

Instead of

$('li').click(function () { ... });

前者是一个单一的处理程序，应用于窗口 DOM 对象，侦听其中对 li 的所有点击。后者是一个单独的点击处理程序，应用于当前页面上的每个 li。前者将扩展到所有新来者，后者不会。

希望这有帮助！

相关文章：