即使使用.ON(),新元素也无法正常工作

时间:2015-03-24 11:59:52

标签: javascript jquery

当我创建新的TASK时,“编辑”(保存更改)和“删除”链接停止工作。这有什么不对?

我正在使用.on(),但它不适用于新元素。

HTML:

<ul id="incomplete-tasks">
 <li>
      <input type="checkbox"><label>Pay Bills</label>
      <input type="text">
      <button class="edit">Edit</button>
      <button class="delete">Delete</button>
 </li>
 </ul>

jQuery的:

 //Add new TASK
 $('#addButton').click(function(){
 $("#incomplete-tasks").append('<li><input type="checkbox"><label>' + $('#new-task').val() + '</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>')
 });

 //Show edit mode
 $("#incomplete-tasks").on("click", ".edit", function() {

 //show
 $(this).parent().toggleClass('editMode');

 //Add label value = edit field text
 var $label = $(this).children().find('label').text();
 $(this).children().find('input[type=text]').val($label);
 });

 //Save changes when "edit"is clicked again 
 $('.edit').on("click", function() {
 var value = $(this).parent().find('input[type=text]').val();
 $(this).parent().find('label').text(value);
 });

 //delete task 
 $('.delete').on("click", function() {
 $(this).parent().hide();
 });

完整代码 - http://codepen.io/tsalexey544/pen/LEqbpV?editors=101

0 个答案:

没有答案