Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.03.2018, 16:32
Новичок на форуме
Отправить личное сообщение для spinuvlad Посмотреть профиль Найти все сообщения от spinuvlad
 
Регистрация: 09.03.2018
Сообщений: 1

Странное поведение table.addEventListener DOM
Смотрите этот пример: playcode.io/task

Помогите и объясните пожалуйста:
При нажатий на "Add Task" создаётся новый ряд в table.
table.addEventListener('click', checkTask); - везде где кликою на таблицу срабатывает нормально. Но если кликать на "вопросительный знак" - функция выводит 2 раза "TABLE" и всё исчезает...

ни как не могу найти причину....
Ответить с цитированием
  #2 (permalink)  
Старый 12.03.2018, 13:35
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,115

Сообщение от spinuvlad
ни как не могу найти причину....
Сделай тестовый пример и выложи его тут.
Ответить с цитированием
  #3 (permalink)  
Старый 12.03.2018, 15:10
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style id="playcode_style">body {
  background-color: #fff;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  position: relative;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode'; }
  body #to-do-list {
    max-width: 600px;
    margin: 0 auto; }
    body #to-do-list table {
      border-collapse: collapse; }
      body #to-do-list table tr th:nth-child(2) {
        width: 100%; }
      body #to-do-list table tr td {
        border: 1px solid black;
        padding: 0; }
        body #to-do-list table tr td:nth-child(2) {
          width: 100%;
          padding: 5px; }
  body #input-block {
    margin-top: 10px; }
    body #input-block input {
      font-size: 16px;
      padding: 5px; }
      body #input-block input#input {
        width: 75%; }
      body #input-block input#submit {
        float: right;
        font-weight: bold;
        cursor: pointer;
        width: 20%; }
</style>
</head>
<body>
    <div id="to-do-list">
        <div id="input-block">
            <input type="text" id="input" placeholder="Enter Your Task">
            <input type="submit" id="submit" value="Add Task">
        </div>
        <table id="table">
            <tbody><tr>
                <th></th>
                <th>My Tasks</th>
                <th></th>
            </tr>
        </tbody>
</table>
</div>

<script>
let toDoList = document.getElementById('to-do-list'),
    input = document.getElementById('input'),
    submit = document.getElementById('submit'),
    table = document.getElementById('table');
    tbody = document.querySelector('tbody');

submit.addEventListener('click', addTask);

input.addEventListener('keypress', function(enterKey) {
    if (enterKey.keyCode == 13) addTask();
}); 

table.addEventListener('click', checkTask);

function addTask() {
    let tr = document.createElement('tr'),

        td1 = document.createElement('td'),
        label = document.createElement('label'),
        tagI = document.createElement('i'),

        checkbox = document.createElement('input'),
        td2 = document.createElement('td'),
        td3 = document.createElement('td'),
        tagITrash = document.createElement('i');

    checkbox.type = 'checkbox';
    checkbox.id = 'toggle';
    checkbox.style.cssText = 'opacity:0; position:absolute;';
    label.htmlFor = 'toggle';
    if (!checkbox.checked) tagI.className = 'fas fa-question';
    tagI.style.cssText = 'color: #999; padding: 10px; display: block;';

    label.appendChild(tagI);
    td1.appendChild(checkbox);
    td1.appendChild(label);

    tagITrash.className = 'fas fa-trash-alt';
    tagITrash.style.cssText = 'color: #999; padding: 10px; display: block;';
    td3.appendChild(tagITrash);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tbody.appendChild(tr);
    input.value = ''; 
}

function checkTask(e) {
    //let label = event.target.closest('label');
  //  alert(this.tagName);
    alert(e.target.tagName);
        //     checkCheckbox = event.target.closest('input[type=checkbox]');
        // if (checkCheckbox.checked) {
        //     alert(checkCheckbox.checked);
        // }
}</script>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Странное поведение jquery (событие .on) lawer85 jQuery 4 11.01.2015 12:42
Странное поведение jQuery borodatych Javascript под браузер 5 27.02.2014 10:47
Странное поведение Dojo. Kuzya59 Dojo toolkit 4 15.10.2011 15:42
Странное поведение переменной mycoding Серверные языки и технологии 4 14.01.2011 19:18
Странное поведение replace cooli0 Общие вопросы Javascript 4 25.01.2010 17:16