title: How to add event on dynamically created table element inside iframe
body: <p>I have an HTML code like this</p>
  
  <pre><code> &lt;table id="Table1"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;th scope="col"&gt;
                      Srno.
                  &lt;/th&gt;
                  &lt;th scope="col"&gt;
                      Emp code
                  &lt;/th&gt;
                  &lt;th scope="col"&gt;
                      Name
                  &lt;/th&gt;
                  &lt;th scope="col"&gt;
                      Mobile No
                  &lt;/th&gt;
                  &lt;th scope="col"&gt;
                      Delete
                  &lt;/th&gt;
              &lt;/tr&gt;               
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>I have a button and when the <code>button</code> is clicked the the new <code>tr</code> with 4 <code>td</code> added into table, the code become like this.</p>
  
  <pre><code> &lt;table id="Table1"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;th scope="col"&gt;
                      Srno.
                  &lt;/th&gt;
                  &lt;th scope="col"&gt;
                      Emp code
                  &lt;/th&gt;
                  &lt;th scope="col"&gt;
                      Name
                  &lt;/th&gt;
                  &lt;th scope="col"&gt;
                      Mobile No
                  &lt;/th&gt;
                  &lt;th scope="col"&gt;
                      Delete
                  &lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      1
                  &lt;/td&gt;
                  &lt;td style="display: none;"&gt;
                      198
                  &lt;/td&gt;
                  &lt;td&gt;
                      SHR003
                  &lt;/td&gt;
                  &lt;td&gt;
                      Saurabh khandelwal
                  &lt;/td&gt;
                  &lt;td&gt;
                      9891491920
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;img class="clsImage" src="../../images/delete1.png" style="cursor: pointer;"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>Now i used <code>delete</code> image to delete current row which is <code>dynamically</code> added in <code>iframe</code>.For same am using that <code>Jquery</code> code :</p>
  
  <pre><code>$("iframe").contents().find('body').on("click", '.clsImage', function (e) {
      alert('111');
         });
  </code></pre>
  
  <p>But after click on <code>delete</code> image button the newest added <code>tr</code> inside the iframe is not gives <code>alert</code>.</p>
  
  <p>I am using `Jquery 1.9.1'</p>
  
  <p>Please help me</p>