title: .onClick not working with dynamic element id
body: <p>I hope someone helps me. I have a task .onClick event fire a function with a dynamic element.
  when i  fire die() function  and i have result case 2 and my variable value is katiRun = ".gn"; but after i was click on (.gn ) element it is not working and another some(".rd" or ".bl" or ".yl" ) classed element is working with function movement.</p>
  
  <pre><code>**1.** 
  &lt;div class="player_board_white" data-kati-count="4"&gt;
                      &lt;span class="bg-circle"&gt;&lt;i class="kati rd" id="r1"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;span class="bg-circle"&gt;&lt;i class="kati rd" id="r2"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;span class="bg-circle"&gt;&lt;i class="kati rd" id="r3"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;span class="bg-circle"&gt;&lt;i class="kati rd" id="r4"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;/div&gt;
  
  **2.**
   &lt;div class="player_board_white" data-kati-count="4"&gt;
                         &lt;span class="bg-circle"&gt;&lt;i class="kati gn" id="g1"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;span class="bg-circle"&gt;&lt;i class="kati gn" id="g2"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;span class="bg-circle"&gt;&lt;i class="kati gn" id="g3"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;span class="bg-circle"&gt;&lt;i class="kati gn" id="g4"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;/div&gt;
  
  
  **3.**
  &lt;div class="player_board_white" data-kati-count="4"&gt;
               &lt;span class="bg-circle"&gt;&lt;i class="kati bl" id="bl1"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span class="bg-circle"&gt;&lt;i class="kati bl" id="bl2"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span class="bg-circle"&gt;&lt;i class="kati bl" id="bl3"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;span class="bg-circle"&gt;&lt;i class="kati bl" id="bl4"&gt;&lt;/i&gt;&lt;/span&gt;
                &lt;/div&gt;
  
  **4.**
  &lt;div class="player_board_white" data-kati-count="4"&gt;
                          &lt;span class="bg-circle"&gt;&lt;i class="kati yl" id="y1"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;span class="bg-circle"&gt;&lt;i class="kati yl" id="y2"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;span class="bg-circle"&gt;&lt;i class="kati yl" id="y3"&gt;&lt;/i&gt;&lt;/span&gt;
                          &lt;span class="bg-circle"&gt;&lt;i class="kati yl" id="y4"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>jquery code </p>
  
  <pre><code>function die() {
      if (userHasBajji == 4) {
          userHasBajji = 1;
      }
      else {
          userHasBajji++;
      }
  
  
      switch (userHasBajji) {
  
          case 1:
              katiRun = ".rd"
              katiStartFrom = "t14"
              katiTurnFrom = "t12"
              break;
  
          case 2:
              katiRun = ".gn";
              katiStartFrom = "t27";
              katiTurnFrom = "t25"
              break;
  
          case 3:
              katiRun = ".bl";
              katiStartFrom = "t1";
              katiTurnFrom = "t51"
              break;
  
          case 4:
              katiRun = ".yl";
              katiStartFrom = "t40";
              katiTurnFrom = "t38"
              break;
      }
  
  
  
  
  
  $(document).on("click", katiRun,  function (e) {
          $thisId = $(this).attr('id');
          console.log($thisId)
          Chal($thisId, katiStartFrom, katiTurnFrom);
  
      });
  </code></pre>
  
  <p>when I click on the katiRun element the function effect on another element</p>