如何動態重命名列表中的附加項目

試圖在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>

提示和幫助非常感謝

來源

2013-09-28 user2809321

問題領域是這樣的，你的.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

來源

2013-09-28 02:14:12 PSL

我想你想要的是「事件代理」。在jQuery中，這意味着使用

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

 Instead of

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

這前者是一個單一的處理器，適用於窗口DOM對象，聽李的其中的所有點擊。後者是一個單獨的點擊處理程序，適用於當前在頁面上的每個li 。前者將擴展到所有新手，後者則不會。

希望這有助於！

來源

2013-09-28 02:11:24

如何動態重命名列表中的附加項目

回答

相關問題