Как динамически переименовать добавленный элемент списка

Попытка изменить имя динамически в списке 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, прослушивание всех кликов на Ли в нем. Последний представляет собой отдельный обработчик кликов, применяемый к каждому элементу , который в настоящее время находится на странице. Первый будет распространяться на всех новичков, последний не будет.

Надеюсь, это поможет!

источник

2013-09-28 02:11:24

Как динамически переименовать добавленный элемент списка

ответ

Смежные вопросы