javascript – onclick not working on div

Question:

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 = '<strong>' + i + '</strong>';
    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;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
    function test(num) {
      $('#' + num).animate({
        opacity: '1'
      }, 5000);
    }
  </script>
</head>

<body>
  <div id="calb"></div>
  <script>
    create();
  </script>
</body>

</html>

There are the following codes:

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 = '<strong>' + i + '</strong>';
    div.setAttribute("id", i);
    calb.insertBefore(div, calb.childen);
    test(i);
  }
}

JQuery:

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

As a result, we have: – the cursor is not a pointer, – the on-click is not on-click, – there is no hover animation.

The problem appeared after embedding jQuery. help…

ps: How should it look like, or rather be written, a similar code that performs the functions that this one should perform? Thanks!

Answer:

Using jQuery 2.1.1 and without violating the HTML spec regarding DOM element id generation ( 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 = '<strong>' + i + '</strong>';
    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;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calb"></div>

Post Views: 52