Question

尝试在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>

提示和帮助非常感谢

Answer 1

我认为你想要的是“活动代表团”。在jQuery中，这意味着使用

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



Instead of

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

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

希望这有帮助！

Answer 2

您的问题区域是这样，您的.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 () { ... }

<强> Demo

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

2 个答案: