28.12.2015, 20:11
|
|
Новичок на форуме
|
|
Регистрация: 28.12.2015
Сообщений: 8
|
|
|
создание элементов динамически DOM
Подскажите как повесить событие (например onclick) на динамически созданный (createElement) элемент (например <button>).
 |
|
28.12.2015, 20:52
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сергей_Р,
повесить при создании или использовать делегирование, а лучше код покажите.
|
|
28.12.2015, 21:21
|
|
Новичок на форуме
|
|
Регистрация: 28.12.2015
Сообщений: 8
|
|
|
var my_div = document.getElementsByTagName('div');
var addButton = function (e) {
if (e.target.className === 'block') {
var my_button = document.createElement("button"),
id_element = document.getElementById("button_v"),
text = document.createTextNode("Кнопка");
my_button.appendChild(text);
my_button.setAttribute('id', 'plus_v');
my_button.classList.add('my_button');
id_element.appendChild(my_button);
}
my_div[0].removeEventListener('mouseover', addButton);
}
var addCell = function (e) {
var div = document.createElement("div"),
cell = document.getElementById("cell"),
text_v = document.createTextNode("Cell V");
if (e.target.id === 'plus_v') {
div.classList.add('block_vertical');
div.appendChild(text_v);
cell.appendChild(div);
}
}
var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
buttons[i].addEventListener('click', addCell, false);
}
|
|
28.12.2015, 21:21
|
|
Новичок на форуме
|
|
Регистрация: 28.12.2015
Сообщений: 8
|
|
|
Как с помощью делегирования? не могу ни как с этим разобраться
|
|
28.12.2015, 21:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Сергей_Р,
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
28.12.2015, 22:03
|
|
Новичок на форуме
|
|
Регистрация: 28.12.2015
Сообщений: 8
|
|
var my_div = document.getElementsByTagName('div');
var addButton = function (e) {
if (e.target.className === 'block') {
var my_button = document.createElement("button"),
id_element = document.getElementById("button_v"),
text = document.createTextNode("Кнопка");
my_button.appendChild(text);
my_button.setAttribute('id', 'plus_v');
my_button.classList.add('my_button');
id_element.appendChild(my_button);
}
my_div[0].removeEventListener('mouseover', addButton);
}
var addCell = function (e) {
var div = document.createElement("div"),
cell = document.getElementById("cell"),
text_v = document.createTextNode("Cell V");
if (e.target.id === 'plus_v') {
div.classList.add('block_vertical');
div.appendChild(text_v);
cell.appendChild(div);
}
}
var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
buttons[i].addEventListener('click', addCell, false);
}
|
|
28.12.2015, 22:12
|
|
Новичок на форуме
|
|
Регистрация: 28.12.2015
Сообщений: 8
|
|
|
Если имеется одна кнопка html. При ее нажатии динамически создается вторая (c определенным id или class). Как с помощью делегирования на вторую повесить событие, предварительно описанное? Что б при нажатии на вторую срабатывало еще событие.
|
|
28.12.2015, 22:14
|
|
Новичок на форуме
|
|
Регистрация: 28.12.2015
Сообщений: 8
|
|
var my_div = document.getElementsByTagName('div');
var addButton = function (e) {
if (e.target.className === 'block') {
var my_button = document.createElement("button"),
id_element = document.getElementById("button_v"),
text = document.createTextNode("Кнопка");
my_button.appendChild(text);
my_button.setAttribute('id', 'plus_v');
my_button.classList.add('my_button');
id_element.appendChild(my_button);
}
my_div[0].removeEventListener('mouseover', addButton);
}
var addCell = function (e) {
var div = document.createElement("div"),
cell = document.getElementById("cell"),
text_v = document.createTextNode("Cell V");
if (e.target.id === 'plus_v') {
div.classList.add('block_vertical');
div.appendChild(text_v);
cell.appendChild(div);
}
}
var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
buttons[i].addEventListener('click', addCell, false);
}
|
|
28.12.2015, 22:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Сергей_Р, смутно вас понимаю но делегирование можно так, вместо алерта впишите что вам нужно
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.area{
width: 200px;
height: 200px;
border: 5px solid #FF0000;
}
.go {
width: 210px;
height: 20px;
background-color: #CD853F;
}
.lime{
background-color: #00FF00;
}
</style>
</head>
<body>
<div class="go">create</div>
<div class="area">area</div>
<script>
window.addEventListener('DOMContentLoaded', function() {
var go = document.querySelector('.go'),
area = document.querySelector('.area');
go.addEventListener('click', function() {
var div = document.createElement("div"),
text_v = document.createTextNode("узнать индекс");
div.appendChild(text_v);
area.appendChild(div);
div.classList.add('lime')
});
area.addEventListener('click', function (event) {
var cls = event.target.classList;
if(cls && cls.contains('lime')) {
var index = [].indexOf.call(document.querySelectorAll('.lime'), event.target)
alert(index); //или любое нужное вам событие
}
});
});
</script>
</body>
</html>
|
|
28.12.2015, 22:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
|
|
|
|
