title: How to call the JQuery function from inside the DIV element?
body: <pre><code>&lt;html&gt;
  &lt;h1&gt;animationComplete&lt;/h1&gt;
  &lt;div class="red"&gt;   
      &lt;div id="tile1" class="live-tile" data-initdelay="4500" data-delay="2500" data-mode="flip"&gt;    
          &lt;div&gt;&lt;p&gt;This will be replaced with items from the hidden &amp;lt;ul&amp;gt; with the class 'itemsSource'
             &lt;span class="tile-title"&gt;First Tile&lt;/span&gt;
             &lt;/p&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;p&gt;
                  item content will be here
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- im using a ul here, but this pattern can be used with div, p, span etc. --&gt;
      &lt;ul class="itemsSource"&gt;
          &lt;li&gt;Some content to use 1&lt;/li&gt;
          &lt;li&gt;Some content with a title to use 2
              &lt;span class="tile-title"&gt;look a title!&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;p&gt;Some content in a &amp;lt;p&amp;gt; to use 3&lt;/p&gt;&lt;/li&gt;     
          &lt;li&gt;Some content to use 4&lt;/li&gt;
          &lt;li&gt;Some Content to use 5&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/html&gt;      
  &lt;script&gt;
  var $item = $(".itemsSource&gt;li").first();
  //set the back tile to have content of the first item by default
  $("#tile1&gt;div").last().html($item.html());
  //set up tile
  $("#tile1").liveTile({
      pauseOnHover: true,
      animationComplete: function(tileData, $front, $back) {
          //get the next item from the list or the first
          $item = $item.next("li");
          if ($item.length == 0)
              $item = $(".itemsSource&gt;li").first();
          $back.html($item.html());
  
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I am trying to fetch all the records from the database using Json. for each record the "#tile1" div is added dynamically  with  consists the data for the record.I want to call the function for each tile to load and access the details contained in the list. Can anyne help how to call the function for each div</p>
  
  <p>Here is my code that dynamically creates the tile for each record 
     Click <a href="http://jsfiddle.net/drewgreenwell/9w98S/?utm_source=website&amp;utm_medium=embed&amp;utm_campaign=9w98S" rel="nofollow noreferrer">here</a> to see the tile animation </p>
  
  <pre><code>function showMessages(profiles) {
      for (var i = 0; i &lt; profiles.length; i++) {
          var message = profiles.offers[i];
  
          $('div.red').append(
              $('&lt;div/&gt;')
              .attr({
                  id: message.username,
                  class: "live-tile",
                  mode: "flip"
              }).append($('&lt;div/&gt;').append($('&lt;p/&gt;').text(message.user.email))
                  .append($('&lt;span/&gt;').attr({
                      class: "tile-title"
                  }).text(message.username))));
  
          $("div#" + (message.username)).append(($("&lt;div/&gt;").append($("&lt;p/&gt;"))));
          var list = $("div#" + (message.username)).append($('&lt;ul/&gt;').attr({
              class: "itemsSource"
          })).find('ul');
  
  
          list.append(($("&lt;li/&gt;").text(message.full_name)));
          list.append(($("&lt;li/&gt;").text(message.mobile)));
          list.append(($("&lt;li/&gt;").text(message.currentcity)));
  
  
      }
      loadtile();
  }
  </code></pre>