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

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

javascript jquery html

Javascript 如何动态重命名列表的附加项,javascript,jquery,html,Javascript,Jquery,Html,尝试在html列表中动态更改名称时，“我的重命名”函数对列表中已存在的项目有效，但对附加的项目无效我的代码如下： $(document).ready(function() { // Append items functions $("#btn2").on('click', function () { var name = $('#name').val(); $('<li>', { text: name

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

$（文档）.ready（函数（）{
//附加项函数
$（“#btn2”）。在（'click'，函数（）{
var name=$（'#name'）.val（）；
$（“”{
文本：名称
}).appendTo（'ol'）。append（$（''）{
“类”：“btn3”，
文本：“删除”
})).附加（$（''）{
“类”：“btn4”，
文本：“重命名”
}));
});
//删除项目功能
$（文档）.on（'click'，'ol.btn3'，函数（）{
$（this）.最近（'li'）.remove（）；
});
//重命名函数
$（“.btn4”）。在（'click'，函数（）{
var rename=“test”//$（'#rename'）.val（）；
$（this）.最近（'li'）。在（$（“
”）之后{
文本：重命名
}).appendTo（'ol'）。append（$（''）{
“类”：“btn3”，
文本：“删除”
})).附加（$（''）{
“类”：“btn4”，
文本：“重命名”
}))).remove（）；
});
});
列表项1删除名称
清单项目2
清单项目3
附加列表项

非常感谢您的提示和帮助

我想您需要的是“活动授权”。在jQuery中，这意味着使用


$（'window'）。在（'click'，'li'，函数（）{…}）上
而不是
$（'li'）。单击（函数（）{…}）；

前者是一个单独的处理程序，应用于windowdom对象，监听其中li的所有单击。后者是一个单独的单击处理程序，应用于当前页面上的每个li。前者适用于所有新来者，后者则不适用

希望这有帮助

您的问题是，您的

.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').on('click', ".btn4", function () { ... }