jQuery .each()在添加/添加新元素后未更新

时间:2019-03-16 16:58:05

标签: javascript jquery html click

当我添加新元素时,单击/更改功能上的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();
    });
});

});

0 个答案:

没有答案