当我创建新的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();
});