no delegation | var $document = $(document),
someDiv = $('.someDiv'),
addTable = function(){
var table = $('<table/>').appendTo(someDiv),
i, tr,
j, td;
for (i = 0; i < 20; i++) {
tr = $('<tr/>').appendTo(table);
for (j = 0; j < 20; j++) {
td = $('<td/>').appendTo(tr).
on('click.activate', function() {
$(this).toggleClass('active');
}).
on('mouseenter.hover', function() {
$(this).addClass('hover');
}).
on('mouseleave.hover', function() {
$(this).removeClass('hover');
});
}
}
return table
};
for (var i = 0; i < 5; i++)
addTable();
someDiv.find('td:first').click();
| ready |
with delegation | var $document = $(document),
someDiv = $('.someDiv'),
addTable = function(){
var table = $('<table/>').appendTo(someDiv),
i, tr,
j, td;
for (i = 0; i < 20; i++) {
tr = $('<tr/>').appendTo(table);
for (j = 0; j < 20; j++) {
td = $('<td/>').appendTo(tr);
}
}
return table
};
$document.
on('click.activate', '.someDiv table td', function() {
$(this).toggleClass('active');
}).
on('mouseenter.hover', '.someDiv table td', function() {
$(this).addClass('hover');
}).
on('mouseleave.hover', '.someDiv table td', function() {
$(this).removeClass('hover');
});
for (var i = 0; i < 5; i++)
addTable();
someDiv.find('td:first').click();
| ready |
with clone delegation | var $document = $(document),
someDiv = $('.someDiv'),
genTable = function(){
var table = $('<table/>'),
i, tr,
j, td;
for (i = 0; i < 20; i++) {
tr = $('<tr/>').appendTo(table);
for (j = 0; j < 20; j++) {
td = $('<td/>').appendTo(tr);
}
}
return table
},
cloneTable = function(table){
return table.clone().appendTo(someDiv);
},
template = genTable();
$document.
on('click.activate', '.someDiv table td', function() {
$(this).toggleClass('active');
}).
on('mouseenter.hover', '.someDiv table td', function() {
$(this).addClass('hover');
}).
on('mouseleave.hover', '.someDiv table td', function() {
$(this).removeClass('hover');
});
for (var i = 0; i < 5; i++)
cloneTable(template);
someDiv.find('td:first').click();
| ready |
with deep clone delegation | var $document = $(document),
someDiv = $('.someDiv'),
genTable = function(){
var table = $('<table/>'),
i, tr,
j, td;
for (i = 0; i < 20; i++) {
tr = $('<tr/>').appendTo(table);
for (j = 0; j < 20; j++) {
td = $('<td/>').appendTo(tr);
}
}
return table
},
cloneTable = function(table){
return table.clone(true, true).appendTo(someDiv);
},
template = genTable();
$document.
on('click.activate', '.someDiv table td', function() {
$(this).toggleClass('active');
}).
on('mouseenter.hover', '.someDiv table td', function() {
$(this).addClass('hover');
}).
on('mouseleave.hover', '.someDiv table td', function() {
$(this).removeClass('hover');
});
for (var i = 0; i < 5; i++)
cloneTable(template);
someDiv.find('td:first').click();
| ready |
with concat html delegation | var $document = $(document),
someDiv = $('.someDiv'),
genTable = function(){
var table = $('<table/>'),
i, tr,
j, td;
for (i = 0; i < 20; i++) {
tr = $('<tr/>').appendTo(table);
for (j = 0; j < 20; j++) {
td = $('<td/>').appendTo(tr);
}
}
return table
},
template = genTable().html(),
tables = [];
$document.
on('click.activate', '.someDiv table td', function() {
$(this).toggleClass('active');
}).
on('mouseenter.hover', '.someDiv table td', function() {
$(this).addClass('hover');
}).
on('mouseleave.hover', '.someDiv table td', function() {
$(this).removeClass('hover');
});
for (var i = 0; i < 5; i++)
tables.push(template);
someDiv.append(tables.join(''));
someDiv.find('td:first').click();
| ready |