当我添加新元素时,单击/更改功能上的jQuery不起作用。
这里是Full Code,请尝试通过添加任务按钮添加新元素,然后选中复选框,右侧的星形图标应更改为垃圾桶图标,但在新元素上未更改。或通过单击星标按钮,应将颜色更改为黄色。
$('document').ready(function() {
$('#plus-btn').on('click', function() {
$('#new-task').css('display', 'flex');
$('#new-task').show();
});
$('.close-btn').on('click', function() {
$('#new-task').hide();
});
$('#new-task').on('submit', function(event) {
event.preventDefault();
var taskContent = $('<div>');
var taskCheck = $('<input>');
var taskIcon = $('<div>');
var taskImg = $('<img>');
var task = $('<div>');
var ul = $('<ul>');
var title = $('<li>');
var desc = $('<li>');
var taskFav = $('<div>');
var favIcon = $('<i>');
var $getTitle = $('#task-title').val();
var $getDesc = $('#task-desc').val();
var getTitle = $getTitle;
var getDesc = $getDesc;
taskContent.addClass('task-content');
taskCheck.addClass('task-check');
taskCheck.attr('type', 'checkbox');
taskIcon.addClass('task-icon');
taskImg.addClass('task-img');
task.addClass('task');
title.addClass('task-list');
desc.addClass('task-desc');
taskFav.addClass('task-fav');
favIcon.addClass('favorite fa fa-star');
title.text(getTitle);
desc.text(getDesc);
if (getTitle != '') {
$('.task-container').append(taskContent);
taskContent.append(taskCheck);
taskContent.append(taskIcon);
taskIcon.append(taskImg);
taskContent.append(task);
task.append(ul);
ul.append(title);
ul.append(desc);
taskContent.append(taskFav);
taskFav.append(favIcon);
}
getTitle = '';
getDesc = '';
});
$('.favorite').each(function() {
$(this).on('click', function() {
$(this).toggleClass('fa-star-c');
});
});
$('.task-check').each(function(){
$(this).on('change', function() {
$(this).parent('.task-content').find('.favorite').toggleClass('fa-trash');
});
});
$('.task-icon').each(function() {
$(this).on('click', function() {
$('#icon-selector').toggle();
});
});
});