Не работает onclick на блоке div

function create() { var num = 15; for (var i = 0; i < num; i++) { var div = document.createElement('div'); div.className = "ava"; div.onclick = function(i) { return function() { alert(i); } }(i); div.innerHTML = '' + i + ''; div.setAttribute("id", i); calb.insertBefore(div, calb.childen); test(i); } } .ava { opacity: 0; cursor: pointer; text-align: center; float: left; width: 65px; margin: 10px; padding: 15px; border: 1px solid #d6e9c6; border-radius: 4px; color: #3c765f; background-color: #C7F7B7; transition: 0.3s; } .ava:hover { transform: scale(1.1); text-align: center; }

Имеется следующие коды:
CSS:
.ava { opacity:0; cursor: pointer; text-align: center; float: left; font-size: 18px; width: 65px; margin: 10px; padding: 15px; border: 1px solid #d6e9c6; border-radius: 4px; color: #3c765f; background-color: #C7F7B7; transition: 0.3s; } .ava:hover { transform: scale(1.1); text-align: center; }
JavaScript:
function create() { var num = 15; for(var i = 0; i < num; i++) { var div = document.createElement('div'); div.className = "ava"; div.onclick = function(i) { return function() { alert(i); }}(i); div.innerHTML = '' + i + ''; div.setAttribute("id", i); calb.insertBefore(div, calb.childen); test(i); } }
JQuery:
function test (num) { $('#'+num).animate({opacity:'1'},5000); }
В итоге мы имеем: - курсор не пойнтер, - онклик не онкликается, - анимации при наведении нету.
Проблема появилась после пришивания JQuery. help...
ps: Как вообще должен выглядеть, точнее быть написан, подобный код, выполняющий функции которые этот должен бы выполнять? Спасибо!

Ответ

С использованием jQuery 2.1.1 и без нарушения спецификации HTML в части формирования id DOM-элементов (https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html).
function create() { var num = 15; for (var i = 0; i < num; i++) { var div = document.createElement('div'); div.className = "ava"; div.onclick = function(i) { return function() { alert(i); } }(i); div.innerHTML = '' + i + ''; div.setAttribute("id", "div" + i); calb.insertBefore(div, calb.childen); test(i); } } function test(num) { //console.log($('#div' + num).length); $('#div' + num).animate({ opacity: '1' }, 5000); } create(); .ava { opacity: 0; cursor: pointer; text-align: center; float: left; width: 65px; margin: 10px; padding: 15px; border: 1px solid #d6e9c6; border-radius: 4px; color: #3c765f; background-color: #C7F7B7; transition: 0.3s; } .ava:hover { transform: scale(1.1); text-align: center; }