how to animate divs that are created dynamically?

Question

I've been able to animate divs using jquery, and I've been able to dynamically create divs. However, I'm problems animating the divs after they are dynamically created.

The code below dynamically creates div ok:

 var nameArray = [
    "Jimmy",
    "Sonny",
    "Sammy",
    "Henry",
    "Hank",
    "Susan",
    "Sebby",
    "Alyssa",
    "Pepper",
    "Ken",
    "Steve",
    "Kandi",
    "Wes"
    ];
  var numberStudents = nameArray.length;
  var interval;

  for(n = 0; n < numberStudents; n++){
        var divName = "#floatName" + n;
        console.log(divName);
        var names = nameArray[n];
        var divTag = document.createElement('div');
        divTag.id = divName;
        divTag.innerHTML = names;
        divTag.style.position = "absolute";
        divTag.className = "randomFloat";
        document.body.appendChild(divTag);
  };

The following animation works if I type in the divs manually:

var loopAllowed = false;
  $( "#go" ).click(function() {
    loopAllowed = true;
    var max = 12;
    var loop = function(){
      for(i = 0; i < 12; i++){
        var divName = "floatName" + i;
        console.log(divName);
        $( "#" + divName ).animate({
            left: Math.random()*500 + "px",
            top: Math.random()*500 + "px"
        }, 500, i == max - 1 && loopAllowed ? loop : undefined);
      }
     };
     loop(); 
    });

  $( "#stop" ).click(function() {
        loopAllowed = false;
  });

I think the problem may have to do with having to delegate an event. One idea is to use

$( "#randomFloat" ).on("click", "#go", function() {

I got this idea from reading this here: jQuery - selecting dynamically created divs

It doesn't work in my case though.

JSFiddle for the dynamically created divs that I'm having problems with: https://jsfiddle.net/shmish/1fj32749/17/

JSFiddle for manually creating divs and animating them: https://jsfiddle.net/shmish/3s5vn2yL/2/

i think click callback doesn't work on dynamically populated html you must use live or bind jquery callbacks ..... — Haider Ali, Aug 04 '15 at 16:37
You could attach the eventlistener directly to the divTag, while you create it. — , Aug 04 '15 at 16:40
you marked the wrong guy with the answer. I gave the same answer 5 minutes earlier. but cheers. — AwokeKnowing, Aug 04 '15 at 17:29
I'm new to reddit. I marked yours right, and then I marked his. I thought both would get marked correct. — Doug Smith, Aug 04 '15 at 17:32
@DougSmith new to StackOverflow too I guess. Don't worry, happened to me once too at the beginning. — AwokeKnowing, Aug 04 '15 at 17:33

score 2 · Answer 1 · edited May 23 '17 at 12:21

You have an error when you give the generated DIVs a name:

var divName = "#floatName" + n;

change to

var divName = "floatName" + n;

The character # is not allowed in the ID attribute

Because right now your DIVs are generated like this:

<div id="#floatName0" class="randomFloat">Jimmy</div>

And to select this with jQuery you would need to write:

$("##floatName0")

Which throws an Sizzle-Error:

Uncaught Error: Syntax error, unrecognized expression: ##floatName0

See updated fiddle: https://jsfiddle.net/1fj32749/19/

Also see valid values for ID: What are valid values for the id attribute in HTML?

AwokeKnowing · Accepted Answer · 2015-08-04T17:05:17.093

EDIT!!!: I found your error

change when dynamically creating the div (but not in the jquery part)

var divName = "#floatName" + n;

to

 var divName = "floatName" + n; //remove #

So the issue is that in pure javascript, you don't put a # to specify an id

final code:

var nameArray = [
    "Jimmy",
    "Sonny",
    "Sammy",
    "Henry",
    "Hank",
    "Susan",
    "Sebby",
    "Alyssa",
    "Pepper",
    "Ken",
    "Steve",
    "Kandi",
    "Wes"
    ];
var numberStudents = nameArray.length;
  var interval;  
  for(n = 0; n < numberStudents; n++){
        var divName = "floatName" + n; // THIS WAS THE PROBLEM
        console.log(divName);
        var names = nameArray[n];
        var divTag = document.createElement('div');
        divTag.id = divName;           // BECAUSE HERE SHOULDN'T HAVE #
        divTag.innerHTML = names;
        divTag.style.position = "absolute";
        divTag.className = "randomFloat";
        document.body.appendChild(divTag);
  };

  $( document ).on('click', '#go', function() {
    var gotime = 1;
    interval = setInterval(function () {
      for(i = 0; i < 12; i++){
        
        $( "#floatName" + i ).animate({
         left: Math.random()*500 + "px",
         top: Math.random()*500 + "px"
        });
      };
      gotime += 1;
      if (gotime > 100) {
        clearInterval(interval);
      }
    }, 500) 
  });

  $( "#stop" ).click(function() {
        clearInterval(interval);
  });

.randomFloat {
    color: red;
    transition: 0.5s left, 0.5s top;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Is this it?
<button id="go">&raquo; Run</button>
<button id="stop">&raquo; Stop</button>
<div id="randomFloat">Is it??</div>

It seems it's not working so I"ll look for a more subtle issue — AwokeKnowing, Aug 04 '15 at 16:49
@TrueBlueAussie yeah so the error was a # when creating the id in javascript — AwokeKnowing, Aug 04 '15 at 17:03

how to animate divs that are created dynamically?

2 Answers2