Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Клонированные эл-ты не отвечают на onclick (https://javascript.ru/forum/dom-window/59512-klonirovannye-ehl-ty-ne-otvechayut-na-onclick.html)

BeardedFace 14.11.2015 13:19
Клонированные эл-ты не отвечают на onclick
 
При нажатии на кнопку она клонируется, почему в данном случае клонированные кнопки не отвечают на 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 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 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 14.11.2015 14:21
Очень благодарен, а можно подробнее про non-live Nodelist, что конкретно это значит, динамически созданные эл-ты в эту коллекцию не попадают?
правильно понял?

Mess4me 14.11.2015 14:22
BeardedFace,
у Вас всё нормально , Вы строкой в onclick :
add = document.querySelectorAll("input[value = '+']")
возвращаете новый набор, просто забыл удалить комментарий )) А вообще про это можно почитать здесь http://learn.javascript.ru/searching-elements-internals

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

Mess4me 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 14.11.2015 15:21
Всё стало ясно, огромное благодарю!))


Часовой пояс GMT +3, время: 13:28.