Форум

BeardedFace · #1 (**permalink**) 14.11.2015, 13:19

При нажатии на кнопку она клонируется, почему в данном случае клонированные кнопки не отвечают на onclick??? срабатывает только первая.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<style>
input[value = "+"] {
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<div>
<input type="button" id="add" value="+">
</div>
</body>
<script>
var add = document.querySelectorAll("input[value = '+']");
add[add.length - 1].onclick = function() {
var parent = this.parentNode;
var clone = this.cloneNode(true);
parent.appendChild(clone);
add = document.querySelectorAll("input[value = '+']");
}
</script>
</html>

EmperioAf · #2 (**permalink**) 14.11.2015, 14:01

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ГГ</title>
<style>
* {
  margin:0;
  padding: 0;
  outline: none;
}

input[value = "+"] {
height: 20px;
width: 20px;
}

</style>
</head>
<body>
<div>
<input type="button" id="add" value="+" onclick="var parent = this.parentNode;var clone = this.cloneNode(true);parent.appendChild(clone);">
</div>
</body>
</html>

Mess4me · #3 (**permalink**) 14.11.2015, 14:02

BeardedFace,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <style>

        input[value = "+"] {
            height: 20px;
            width: 20px;
        }
    </style>
</head>
<body>
<div>
    <input type="button" class="add" value="+">
</div>
</body>
<script>
    var add = document.querySelectorAll("input[value = '+']"); //   Возвращает non-live NodeList всех соответствующих узлов элемента

    add[add.length - 1].onclick = function() {
        var parent = this.parentNode;
        var clone = this.cloneNode(true);
        alert(clone.onclick);
        clone.onclick = this.onclick;
        alert(clone.onclick);
        parent.appendChild(clone);
        add = document.querySelectorAll("input[value = '+']");

    }
</script>
</html>

BeardedFace · #4 (**permalink**) 14.11.2015, 14:21

Очень благодарен, а можно подробнее про non-live Nodelist, что конкретно это значит, динамически созданные эл-ты в эту коллекцию не попадают?
правильно понял?

Mess4me · #5 (**permalink**) 14.11.2015, 14:22

BeardedFace,
у Вас всё нормально , Вы строкой в onclick :

add = document.querySelectorAll("input[value = '+']")

возвращаете новый набор, просто забыл удалить комментарий )) А вообще про это можно почитать здесь http://learn.javascript.ru/searching-elements-internals

BeardedFace · #6 (**permalink**) 14.11.2015, 15:06

А почему без clone.onclick = this.onclick событие не передается следующему эл-ту? ведь эл-т создан, добавлен в add[], почему не работает add[add.length - 1].onclick ?

Mess4me · #7 (**permalink**) 14.11.2015, 15:14

BeardedFace,
в документации сказано :
Cloning a node copies all of its attributes and their values, including intrinsic (in–line) listeners. It does not copy event listeners added using addEventListener() or those assigned to element properties. (e.g. node.onclick = fn)

BeardedFace · #8 (**permalink**) 14.11.2015, 15:21

Всё стало ясно, огромное благодарю!))

Форум

Справочник

Discord чат

Курсы javascript