title: Adding an event handler to a specific children within a DOM tree that is created on runtime
body: <p>I'm trying to bind an event handler to an element that is a children in a DOM tree that is added to the HTML dynamic while runtime. The following HTML shows what I got. The table and its thead and tbody are static HTML. Later I'm adding the content of tbody (<code>&lt;tr&gt;&lt;td&gt;&lt;img src="bla.png"&gt;&lt;/td&gt;&lt;/tr&gt;</code>) to it.</p>
  
  <pre><code>&lt;table id="progData"&gt;
      &lt;thead&gt;
          &lt;th&gt;Image&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;&lt;td&gt;&lt;img src="bla.png"&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>So now I want to bind an event handler on the image like:</p>
  
  <pre><code>$("#progData").on("click", "img", function(e){/*do sth in here*/});
  </code></pre>
  
  <p>But this doesnt work for some reason. I have to use</p>
  
  <pre><code>$("#progData").on("click", "tr", function(e){/*do sth in here*/});
  </code></pre>
  
  <p>to get it to work at least when clicking on the row.</p>
  
  <p>Is there any way to bind the event to a dynamic element that is deeper in the DOM than the direct child element?</p>