can we bind mouse events to a dynamic set of instructions in a JSON call?

resdesign will do!  Great suggestion.  Just now I need to first figure out how too change the text on the external text object.

Where / How can I upload a file (animate file) so you can see what I've done.  I just implemented your idea of nesting the calls inside an object instead of rendering them to the stage and that worked great.  If I zipped the whole project, it would give you a better idea... See if you can all files are now in this dropbox link https://www.dropbox.com/sh/mltt8m5x2ihe3r1/AABfr-pGrl1FCzycv9zWpwNZa?dl=0... should save you some time.

//method dynamically loads JSON file with all items and iterates them on stage

// ============================================================================

$.getJSON('staffnames.json', function(data){

  for(var i=0; i<data.length; i++)

  {

  var s = sym.createChildSymbol("teamThumb", "bigholder");

  s.$("holder").css({"background-image":"url('"+data[i].image+"')"});

  s.$("thename").html(data[i].thename);

  s.$("thetitle").html(data[i].thetitle);

  s.$("certifications").html(data[i].certifications);

  s.$("biography").html(data[i].biography);

  s.getSymbolElement().css({"position":"absolute",

  "left":i*180+"px",

  "top":"30px"

  });

  }

});

// ============================================================================

/* THIS WORKS

// ============================================================================

/* THIS WORKS $.getJSON('staffnames.json', function(data){

  for(var i=0; i<data.length; i++)

  {

  var s = sym.createChildSymbol("teamThumb", "bigholder");

  s.$("holder").css({"background-image":"url('"+data[i].image+"')"});

  s.$("thename").html(data[i].thename);

  s.$("thetitle").html(data[i].thetitle);

  s.$("certifications").html(data[i].certifications);

  s.$("biography").html(data[i].biography);

  s.getSymbolElement().css({"position":"absolute",

  "left":i*180+"px",

  "top":"30px"

  });

  }

});

// ============================================================================

//  BELOW IS PHASE 2.  For absolute positioning.

/* below is what I've figured out so far for manually loading the individual symbols.  I would want to do that so I could control the position of how the loading symbols that are going to be populated by JSON data woudl be discplayed.

//method dynamically loads JSON file with all items but manually calls them in place*/

// AS YOU CAN SEE ALOT OF REDUNDANCY.  How do I effect the same dynamic control as above but with this kind of functionality

$.getJSON('staffnames.json', function(data){

  {

  var myclip = sym.$("teamThumb1");

  var s2 = sym.getSymbol("teamThumb1");

  s2.$("holder").css({"background-image":"url('"+data[0].image+"')"});

  s2.$("thename").html(data[0].thename);

  s2.$("thetitle").html(data[0].thetitle);

  s2.$("certifications").html(data[0].certifications);

  s2.$("biography").html(data[0].biography);

// insert below

  //Sample Code

  //element=sym.$("teamThumb1");

  myclip.on({

         mouseenter: function() {

             // Do something

             sym.$("biographyareaCopy").html(data[0].biography);

             sym.$("thename").html(data[0].thename);

             //alert( "hovered over a div" );

         },

         mouseleave: function() {

             // Do something

             //alert( "mouse left a div" );

         },

         click: function() {

             // Do something

             //alert( "clicked on a div" );

         }

     });

// end sample code

//insert above

  }

});

//  testing 2nd symbol

$.getJSON('staffnames.json', function(data){

  {

  var myclip2 = sym.$("teamThumb2");

  var s2 = sym.getSymbol("teamThumb2");

  s2.$("holder").css({"background-image":"url('"+data[1].image+"')"});

  s2.$("thename").html(data[1].thename);

  s2.$("thetitle").html(data[1].thetitle);

  s2.$("certifications").html(data[1].certifications);

  s2.$("biography").html(data[1].biography);

// insert below

  //Sample Code

  //element=sym.$("teamThumb2");

  myclip2.on({

         mouseenter: function() {

             // Do something

             sym.$("biographyareaCopy").html(data[1].biography);

             sym.$("thename").html(data[1].thename);

             //alert( "hovered over a div" );

         },

         mouseleave: function() {

             // Do something

             //alert( "mouse left a div" );

         },

         click: function() {

             // Do something

             //alert( "clicked on a div" );

         }

     });

// end sample code

//insert above

  }

});

I just tried this but get an error on line 27 else if ($(this).data("jsonindex") == 1) {

Thank you for posting but , I'm not sure I understand this example.

Just sent you the link.  Thanks for offering to look!