JSFiddle - React, Tailwind, and code Playground
HTML
<div class="stuff">
</div>
CSS
.stuff > div {
padding:4px;
}
JavaScript
var F = (function() {
// seems empty() should unbind all events but trying this just-in-case, no luck.
$('.stuff').find('*').each(function() {
$(this).unbind('click', clickMe)
});
// trying emptying at this point instead of the end, shouldn't matter.
$('.stuff').empty();
var appendUs = [];
function clickMe(e) {
alert(e.data.number);
}
function d(number) {
return $('<div>', {
text: 'Number: ' + number
}).bind('click', {
number: number
}, clickMe);
}
for (var i = 0; i < 1000; i += 1) {
appendUs.push(d(i));
}
$('.stuff').empty().append(appendUs);
appendUs = [];
}());