0

Не знаю как обратиться к только одному из дочерних элементов класса, созданных динамически. (когда нажимаешь, например, на 5ый элемент, то в консоль выводиться 5 раз), вот пример кода:

$('#next').click(function()
{
	var rnd = Math.floor(Math.random()*1000);
	var html = '<div>'+rnd+'</div>';
	$(html).attr('id', rnd).addClass('order').prependTo('#orders');
	console.log(rnd);
  
  $('.order').click(function()  //тут проблема
{
	console.log($(this).attr('id')); 
});
  
});
.order {
	display: block;
	padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='next'>More</button>
<div id='orders'>
	<div class='order'>Y</div>
	<div class='order'>X</div>
</div>

1 ответ 1

1

Вы вызываете метод .click() внутри уже существующего метода .click(), получается рекурсивный вызов функции. Чтобы этого не происходило, нужно вынести второй целевой клик за рамки первой функции, так будет работать:

$('#next').click(function()
{
	var rnd = Math.floor(Math.random()*1000);
	var html = '<div>'+rnd+'</div>';
	$(html).attr('id', rnd).addClass('order').prependTo('#orders');
	console.log(rnd);
  
});

  $('body').on('click', '.order', function()  //тут нет проблемы
{
	console.log($(this).attr('id')); 
});
.order {
	display: block;
	padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='next'>More</button>
<div id='orders'>
	<div class='order'>Y</div>
	<div class='order'>X</div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.