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

270
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>

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

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

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

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

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

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

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

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

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

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

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

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

 358