1

Подскажите пожалуйста, как можно повесить обработчик событий на ещё не созданный элемент <i></i> с классом .delete в #tasks_container li. Получается что получить доступ к элементу мы сможем только после того как пользователь добавит новый task, поэтому нет смысла получать класс элемента сразу после загрузки страницы, он будет undefined.

/**
 * Created by Den on 29.06.2017.
 */
var btnAdd          = document.getElementById('add'),
    textField       = document.getElementById('text_field'),
    tasksContainer  = document.getElementById('tasks_container'),
    dontShow        = true,
    btnDelete;

btnAdd.addEventListener('click', function() {
    toggle(textField);
});

textField.onkeydown = function(e) {
    if (e.keyCode === 13) {
        addTask(textField.value);
        toggle(textField);
    }
};



function toggle(elem) {
    if (dontShow) {
        elem.style.display = 'block';
        dontShow = false;
    } else {
        elem.style.display = 'none';
        elem.value = '';
        dontShow = true;
    }
}

function addTask(task) {

    var parent  = tasksContainer;
    var newTask = document.createElement('li');
    newTask.classList.add('task');

    newTask.innerHTML = task + ' ' + setFormatDate() + '<i class="fa fa-trash delete" aria-hidden="true"></i>';
    parent.insertBefore(newTask, parent.children[0]);

    return function() {

        var successMsg = document.createElement('div');
        successMsg.classList.add('successMsg');
        successMsg.textContent = 'Add New Task';
        document.body.appendChild(successMsg);

        displayMsg(successMsg);

    }();

}

function displayMsg(div) {
    setTimeout(function() {
        div.style.opacity = 1;
        setTimeout(function(){
            div.style.opacity = 0;
        }, 2000)
    },10);
}


function setFormatDate() {

    var date = new Date(),
        num         = date.getDate(),
        month       = date.getMonth() + 1,
        year        = date.getFullYear(),
        hour        = date.getHours(),
        minute      = date.getMinutes(),
        formatDate;

    num   = String(num).length <= 1 ? '0' + num : num;
    month = String(month).length <= 1 ? '0' + month : month;
    formatDate = '<span>'+ num + '.' + month + '.' + year + ' <b>[' + hour + ':' + minute + ']' + '</b></span>';

    return formatDate;

}
body {
    color: #757575;
    font-family: 'Consolas', Arial, Helvetica, sans-serif;
    margin: 0;
    background: #485563;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #485563, #29323c);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #485563, #29323c);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    list-style-type: none;
}

input, textarea {outline:none;}

h1 {
    margin: 0;
    padding: 0;
    color: white;
    font-weight: 100;
    border-radius: 5px 5px 0px 0px;
}

#main_app {
    margin: 6% auto;
    max-width: 860px;
    /*border: 1px solid red;*/
}

#head_app {
    text-align: center;
    background: #272727;
    border-radius: 5px 5px 0px 0px;
    color: white;
    padding: 10px 8px 10px 5px;
    border-bottom: none;
}

#head_app li {
    display: inline-block;
}

#head_app li:last-child { float: right; }
#head_app li:last-child:hover { color: red; }

#add {
    cursor: pointer;
    font-weight: bold;
    font-size: 30px;
}

.input_block {
    width: 100%;
}

#text_field {
    box-sizing: border-box;
    border: none;
    width: 100%;
    background-color: #333;
    color: #fff;
    border-top: none;
    margin: 0;
    padding: 15px 0px 15px 15px;
    font-size: 1em;
    display: none;
}

#tasks_container {
    color: white;
    font-weight: normal;
    width: 100%;
}

#tasks_container li:not(.end_tasks) {
    padding: 15px 0px 15px 15px;
    border-left: 5px solid #272727;
    border-right: 5px solid #272727;
    border-bottom: 1px solid #272727;
    font-size: .85em;
}

#tasks_container li span {
    margin-right: 1%;
    background: white;
    color: #000;
    display: inline-block;
    padding: 3px 5px;
    float: left;
}

#tasks_container li.end_tasks {
    background-color: #272727;
    border-radius: 0px 0px 5px 5px;
    height: 10px;
}

.task {
    background-color:  #F22613;
}

.fa {
    float: right;
    margin-right: 1%;
    cursor: pointer;
}

/*success msg*/
.successMsg {
    position: absolute;
    top: 1%;
    left: 90%;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 1%;
    text-align: center;
    opacity: 0;
    transition: 1s;
}
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To Do js</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="libs/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>

    <div id="main_app">
        <header id="head_app">
            <ul>
                <li><h1>To-Do List</h1></li>
                <li><span id="add">+</span></li>
            </ul>
        </header>
        <input id="text_field" type="text" placeholder="INSERT A NEW TO-DO">

        <ul id="tasks_container">
            <li class="end_tasks"></li>
        </ul>
    </div>

    <script src="scripts/main.js"></script>
</body>
</html>

1

2 ответа 2

1

Можно воспользоваться делегированием событий и .matches().

Покликайте на + element, а потом на любой из добавленных в контейнер дивов.

document.querySelector('button').onclick = function() {
  let element = document.createElement('div');
  
  document.querySelector('.container').appendChild(element);
};

document.querySelector('.container').onclick = function(e) {
  if (e.target.matches('.container div')) {
    let nodes = [].slice.call(document.querySelectorAll('.container div'))
    console.log('my index is', nodes.indexOf(e.target) );
  }
};
.container {
  border: 1px solid;
  padding: 15px;
  margin-top: 15px;
}

.container div {
  padding: 15px;
  border: 1px solid #ccc;
}

.container div + div {
  margin-top: 10px;
}
<button>+ element</button>

<div class=container></div>

1
  • Огромное вам спасибо, не знал что так можно делать. 6 июл 2017 в 3:21
0

Повесьте обработчик на родительский элемент, в данном случае #tasks_container. Он будет ловить события на всплытии и обрабатывать их.

var taskContainer = document.querySelector("#tasks_container");

taskContainer.addEventListener("click", event => {
    if (event.target.classList.contains("delete")) {
        taskContainer.removeChild(event.target.parentElement)
    }
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.