Javascript.RU

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

создание элементов динамически DOM
Подскажите как повесить событие (например onclick) на динамически созданный (createElement) элемент (например <button>).
Ответить с цитированием
  #2 (permalink)  
Старый 28.12.2015, 20:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сергей_Р,
повесить при создании или использовать делегирование, а лучше код покажите.
Ответить с цитированием
  #3 (permalink)  
Старый 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);
}
Ответить с цитированием
  #4 (permalink)  
Старый 28.12.2015, 21:21
Новичок на форуме
Отправить личное сообщение для Сергей_Р Посмотреть профиль Найти все сообщения от Сергей_Р
 
Регистрация: 28.12.2015
Сообщений: 8

Как с помощью делегирования? не могу ни как с этим разобраться
Ответить с цитированием
  #5 (permalink)  
Старый 28.12.2015, 21:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сергей_Р,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 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);
}
Ответить с цитированием
  #7 (permalink)  
Старый 28.12.2015, 22:12
Новичок на форуме
Отправить личное сообщение для Сергей_Р Посмотреть профиль Найти все сообщения от Сергей_Р
 
Регистрация: 28.12.2015
Сообщений: 8

Если имеется одна кнопка html. При ее нажатии динамически создается вторая (c определенным id или class). Как с помощью делегирования на вторую повесить событие, предварительно описанное? Что б при нажатии на вторую срабатывало еще событие.
Ответить с цитированием
  #8 (permalink)  
Старый 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);
}
Ответить с цитированием
  #9 (permalink)  
Старый 28.12.2015, 22:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сергей_Р, смутно вас понимаю но делегирование можно так, вместо алерта впишите что вам нужно
<!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>
Ответить с цитированием
  #10 (permalink)  
Старый 28.12.2015, 22:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сергей_Р,
https://learn.javascript.ru/event-delegation
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
быстрая отрисовка элементов JS (DOM) Brook Events/DOM/Window 2 18.07.2014 00:53
DOM создание объекта JQ ~ вопрос реализации состояния Brook Events/DOM/Window 0 21.01.2014 22:45
Динамически вставить в dom скрипт несколько раз azdev Элементы интерфейса 2 04.11.2012 14:04
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
Динамическое создание элементов DOM Crudelis Общие вопросы Javascript 7 13.11.2010 02:28