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

#javascript #jquery

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: Как вообще должен выглядеть, точнее быть написан, подобный код, выполняющий функции
которые этот должен бы выполнять? Спасибо!
    

Ответы

Ответ 1

С использованием 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;
    }




Ответ 2

Код испольняется в среднем 10 мс.
Код "Igor" тестил - исполняется в среднем 18-20 мс

Для отпимизации времени я убрал работу с DOM и того цыкл for работает быстрее. 
Используеться 1 команда

place.find('.ava').animate({ opacity: '1'}, 5000);


Вместо того чтоб вызывать из цыкла функцию. Результат тотже + меньше вызовов, меньшая
скорость исполнения.
Смотрите: 

console.log()


Пример: jsFiddle



var a = $.now(),
	place = $('[data-type="square"]');

create();

place.on('click',function(){
 	alert($(this).index); 
});

place.find('.ava').animate({
 	opacity: '1'
  }, 5000);

b = $.now();
console.log('time:'+(b-a));

function create() {
  var num = 15,
  	  result = '';
	  
  for (var i = 0; i < num; i++) {
	result += '
'+i+'
'    
  }
  place.append(result);
}
   .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;
    }




Ответ 3

Ошибка в синтаксисе если не ошибаюсь:

По правилам нужно ID назначать в "" ковычках как тут $("#num")
а у вас как я вижу когда принимается параметр num получается вот так:
$(#num) что уже не правильно...

попробуйте сделать так:

$("\"#"+num+"\"").animate({opacity:'1'},5000);