1

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

非常感谢提示和帮助

4

2 回答 2

0

我认为您想要的是“事件委托”。在 jQuery 中，这意味着使用

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

Instead of

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

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

希望这可以帮助！

于 2013-09-28T02:11:24.117 回答
0

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

演示

于 2013-09-28T02:14:12.863 回答