title: How to navigate through a dynamic created link?
body: <p>So I have a table in HTML which gets filled dynamically with <code>&lt;td&gt;</code> elements. These elements are a link, but I don't know how to navigate through them.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="catalog-page" data-role="page"&gt;
          &lt;!-- catalog header --&gt;
          &lt;div data-role="header" data-id="header" id="catalog-header" data-position="fixed" class="ui-header"&gt;
              &lt;a href="#home-page" data-role="button" data-inline="true"&gt;Back&lt;/a&gt;
              &lt;h1&gt;Pokémon Catalog&lt;/h1&gt;
          &lt;/div&gt;
          &lt;!-- /catalog header --&gt;
  
          &lt;div data-role="content"&gt;
              &lt;h1&gt;Gotta catch em all!&lt;/h1&gt;
  
  
              &lt;table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke"&gt;
  
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
  
                  &lt;/tr&gt;
  
              &lt;/table&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>My JS file:</p>
  
  <pre><code>$(document).on("pageshow", "#catalog-page", function() {
  console.warn("catalog-page loaded");
  $.ajax({
      url: "http://pokeapi.co/api/v2/pokemon/"
  }).then(function(data) {
      console.warn("Found " + data.count + " pokemon...");
      console.warn(JSON.stringify(data.results));
  
      var obj = data.results;
      drawTable(obj);
  
      function drawTable(data) {
          for (var i = 0; i &lt; data.length; i++) {
              drawRow(data[i], i);
          }
      }
  
      function drawRow(rowData, c) {
          var row = $("&lt;tr /&gt;")
          $("#table-column-toggle").append(row);
          row.append($("&lt;td&gt;&lt;a href=#pokemon"+c +"&gt;" + rowData.name + "&lt;/a&gt;&lt;/td&gt;"));
      }
  
  });
  });
  </code></pre>
  
  <p>The results of this will be like:</p>
  
  <p><a href="https://i.stack.imgur.com/azBAi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/azBAi.png" alt="enter image description here"></a></p>
  
  <p>Bulbasaur will have an id of pokemon0, ivysaur pokemon1, etc.. </p>
  
  <p>The problem is that if I click on Bulbasaur, I want the page to load a new div. In this div I want to provide information about the Bulbasaur. I am using Jquery mobile for the dynamic loading of the div.</p>
  
  <p>In my HTML code:</p>
  
  <pre><code>&lt;div id="pokemon0" data-role="page"&gt;
          &lt;div data-role="header" data-id="header" id="catalog-header" data-position="fixed" class="ui-header"&gt;
              &lt;a href="#catalog-page" data-role="button" data-inline="true"&gt;Back&lt;/a&gt;
              &lt;h1&gt;Here comes the name of the pokemon&lt;/h1&gt;
  
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This works, but as you can see, I've written id="pokemon0", but that is not how I want it because otherwise I have to create 811 div's..</p>
  
  <p>So long story short, is there a way to change id="pokemon0" to whatever link I am clicking (for instance id="pokemon12")?</p>