@Snewer

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

Здравствуйте!
Имеется блок <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])  );
}
  • Вопрос задан
  • 226 просмотров
Пригласить эксперта
Ответы на вопрос 3
Deodatuss
@Deodatuss
как по мне, так немного лучше:
function appendItem(data) {
    /*
     * На основе данных data генерируется некоторый код
     */
    var $valueHolder = $('<div></div>');
    $valueHolder.attr({
        "data-somevalue": data.somevalue
    });
    var $actionHolder = $("<button></button>");
    $actionHolder.attr({
        "data-action": "someaction"
    });
    $valueHolder.append($actionHolder);
    $actionHolder.on('click', function () {
        /* ... */
    });
    return $valueHolder;
}

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы