Как правильно добавлять в div элементы, на которые добавляются события?

Question

[Snewer]

Здравствуйте!
Имеется блок <div id="content"></div>.
Нужно программно добавлять в него некоторые элементы, на которые навешиваются события.

Делаю так (мне способ не нравится, и кажется, что так делать не хорошо):

function appendItem(data)
{
/*
 * На основе данных data генерируется некоторый код
 */
return $(
'<div data-somevalue="'+data.somevalue+'">' +
/* ... */
'<button data-action="someaction"></button>' +
/* ... */
'</div>'
)
/*
 * На некоторые элементы навешиваются события
 */
.find('[data-action=someaction]').on('click', function(){
/* ... */
});
}

// здесь мы разбираем в цикле данные и заполняем контейнер нашими appendItem() элементами
/* @param {array} data */
var len = data.length;
var container = $('#container');
for(var i = 0; i < len; i++)
{
container.append( appendItem(data[i])  );
}

Answer 1

[olegshilov]

function handleNewElementClick() {
  console.log('handleNewElementClick');
}

function createDivWithData(data) {
  const newElement = document.createElement('div');
  newElement.setAttribute('data-somevalue', data.somevalue);
  newElement.addEventListener('click', handleNewElementClick);

  return newElement;
}

const container = document.getElementById('container');
for (i = 1; i <= 10; i++) {
  container.appendChild(createDivWithData({ somevalue: i }))
}

Answer 2

[Bowen]

Попробуйте так:

function appendItem(data) {
	return $('\
		<div data-somevalue="'+ data.somevalue +'">\
			<button data-action="someaction"></button>\
		</div>\
	');
}
function blablabla(action) {
	switch(action) {
		case 'someaction':
			console.log('someaction');
			break;
		default: return;
	}
}
var $container = $('#container');
var temp = $.map(data, function(i) {
	return appendItem(data[i]);
});
$container
	.append(temp)
	.on('click', '[data-action]', function() {
		var action = $(this).data('action');
		return blablabla(action);
	});