создание элементов динамически DOM
Подскажите как повесить событие (например onclick) на динамически созданный (createElement) элемент (например <button>).
:help: |
Сергей_Р,
повесить при создании или использовать делегирование, а лучше код покажите. |
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); } |
Как с помощью делегирования? не могу ни как с этим разобраться
|
Сергей_Р,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
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);
}
|
Если имеется одна кнопка html. При ее нажатии динамически создается вторая (c определенным id или class). Как с помощью делегирования на вторую повесить событие, предварительно описанное? Что б при нажатии на вторую срабатывало еще событие.
|
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);
}
|
Сергей_Р, смутно вас понимаю но делегирование можно так, вместо алерта впишите что вам нужно
<!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>
|
|
| Часовой пояс GMT +3, время: 04:48. |