title: jQuery can't access the sought DOM element
body: <p>I have the following HTML elements;</p>
  
  <pre><code>&lt;div id="divOrderContainer"&gt;
   &lt;ul id="ulOrders"&gt;
  &lt;li id="liAck"&gt;
    &lt;div id="divViewOrderTitle"&gt;&lt;/div&gt;
    &lt;div id="divViewOrderSpacer"&gt;&lt;/div&gt;
    &lt;div id="divAcknowledgeItems"&gt;&lt;/div&gt;              
  &lt;/li&gt;
  &lt;li id="liTemp"&gt;
    &lt;div id="divViewOrderTitle"&gt;test&lt;/div&gt;
    &lt;div id="divViewOrderSpacer"&gt;&lt;/div&gt;
    &lt;div id="divTempItems"&gt;&lt;/div&gt;
  &lt;/li&gt;
   &lt;/ul&gt;          
  &lt;/div&gt;
  </code></pre>
  
  <p>On page ready, I do an ajax request, then upon response I will insert it into the existing DOM tree like;</p>
  
  <pre><code>htmlBuilder_Temp = htmlBuilder_Temp + '&lt;li&gt;&lt;table id="tableTemp"&gt;' +
   '&lt;tr&gt;' +
  '&lt;th&gt;Ia&lt;/th&gt;' +
  '&lt;th&gt;Den&lt;/th&gt;' +
  '&lt;th&gt;Unt&lt;/th&gt;' +
  '&lt;th&gt;Ory&lt;/th&gt;' +
  '&lt;th&gt;&lt;/th&gt;' +
   '&lt;/tr&gt;';               
  htmlBuilder_Temp = htmlBuilder_Temp + 
   '&lt;tr&gt;' +
  '&lt;td&gt; a &lt;/td&gt;' +
  '&lt;td ""&gt; +b+ &lt;/td&gt;' +
  '&lt;td&gt; +c+ &lt;/td&gt;' +
  '&lt;td&gt; +d+ &lt;/td&gt;' +
  '&lt;td&gt;&lt;span id="span'+posid+'"&gt;delete&lt;span&gt;&lt;/td&gt;' +
   '&lt;/tr&gt;';           
  htmlBuilder_Ack = htmlBuilder_Ack + '&lt;/table&gt;&lt;/li&gt;';
  </code></pre>
  
  <p>The appending of the new elements is "ALWAYS" a success,</p>
  
  <p>So here's my problem, I wanted to attach a click handler to every span under </p>
  
  <pre><code>Table&gt;tr&gt;td&gt;span, 
  </code></pre>
  
  <p>that when clicked would alert me the element id however, when I try to check if the click handler is attached there wasn't any,</p>
  
  <p>Click Handler Code:</p>
  
  <pre><code>$("#divTempItem &gt; table &gt; tbody &gt; tr").('click', 'td span', function(){
     alert($(this).attr("id");
  });
  </code></pre>
  
  <p>I also tried;</p>
  
  <pre><code>$("#tableTemp").on('click', 'tr td span', function(){
     alert($(this).attr("id");
  });
  </code></pre>
  
  <p>But to no avail, it seems I am not able to reach the specific DOM element that I am looking for... Accessing the name "span"+number doesn't resolve my issue,</p>
  
  <p>Am I missing something,</p>
  
  <p>Here's a view of the output DOM tree; I have removed the ending tags on the end, I think this would be enough...</p>
  
  <pre><code>&lt;div id="divOrderContainer"&gt;
     &lt;ul id="ulOrders"&gt;
        &lt;li id="liAck"&gt;&lt;/li&gt;
        &lt;li id="liTemp"&gt;
            &lt;div id="divViewOrderTitle"&gt;test&lt;/div&gt;
            &lt;div id="divViewOrderSpacer"&gt;&lt;/div&gt;
            &lt;div id="divTempItems"&gt;
              &lt;li&gt;
                 &lt;table id="tableTemp"&gt;
                    &lt;tbody&gt;
                       &lt;tr&gt;                         
                         &lt;td&gt; a &lt;/td&gt;
                         &lt;td&gt; b &lt;/td&gt;
                         &lt;td&gt; c &lt;/td&gt;
                         &lt;td&gt; d &lt;/td&gt;
                         &lt;td&gt;&lt;span id="span8"&gt;delete&lt;/span&gt;&lt;/td&gt;
                       &lt;/tr&gt;                         
                     &lt;/tbody&gt;
                  &lt;/table&gt;
  </code></pre>
  
  <p>Who automagically created the "TBODY" element anyway?</p>
  
  <p>Thanks..</p>