jQuery: обработчик on не работает на созданный Javascript элемент

320

30 мая 2017, 02:16

Здравствуйте!

Подскажите, пожалуйста, почему обработчик .on не работает на вновь созданный элемент стандартными методами JavaScript?

Но если элемент добавить с помощью $("#main").append("<div id='test2'>test2</div>");, то работает.

Получается, что нельзя совмещать: либо писать на jQuery, либо на JavaScript?

$('#main').on('click', '#test1', function(e) { 
 
  var div = document.createElement("div"); 
  div.id = name; 
  div.innerHTML = 'test2'; 
  document.getElementById("main").appendChild(div); 
  //$("#main").append("<div id='test2'>test2</div>"); - работает 
}); 
 
$('#main').on('click', '#test2', function(e) { 
  console.log('test2'); //не работает 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
  <div id="test1">test1</div> 
</div>

Answer 1

Задайте ему div.id = 'test2' для того, чтобы он работал.

$('#main').on('click', '#test1', function(e) { 
  var div = document.createElement("div"); 
  div.id = 'test2'; 
  div.innerHTML = 'test2'; 
  document.getElementById("main").appendChild(div); 
  //$("#main").append("<div id='test2'>test2</div>"); - работает 
}); 
 
$('#main').on('click', '#test2', function(e) { 
  console.log('test2'); //работает 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
  <div id="test1">test1</div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

SpeechSynthesis, как получить wav файл?

Нашел функционал который переводит текст в аудио произношение:

338

javascript

Динамическое значение атрибута в jQuery

В jQuery значение переменной number считывается с value поля input в котором атрибут name в данном примере равен 2, вот так:

412

javascript

Как передать значение value через onclick?

как передать значение value через onclick

364

javascript

Удаление из строки элементов

Есть переменная:

405