Test case details

Preparation Code

<div class="someDiv"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
$('.someDiv').html('');
    $('.someDiv').html('');

Test cases

Test #1

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();

Test #2

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();

Test #3

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();

Test #4

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();

Test #5

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();