jQuery 无法访问所寻找的 DOM 元素

Question

我有以下 HTML 元素；

<div id="divOrderContainer">
 <ul id="ulOrders">
<li id="liAck">
  <div id="divViewOrderTitle"></div>
  <div id="divViewOrderSpacer"></div>
  <div id="divAcknowledgeItems"></div>              
</li>
<li id="liTemp">
  <div id="divViewOrderTitle">test</div>
  <div id="divViewOrderSpacer"></div>
  <div id="divTempItems"></div>
</li>
 </ul>          
</div>

页面准备好后，我执行一个 ajax 请求，然后根据响应将其插入到现有的 DOM 树中，如下所示:

htmlBuilder_Temp = htmlBuilder_Temp + '<li><table id="tableTemp">' +
 '<tr>' +
'<th>Ia</th>' +
'<th>Den</th>' +
'<th>Unt</th>' +
'<th>Ory</th>' +
'<th></th>' +
 '</tr>';               
htmlBuilder_Temp = htmlBuilder_Temp + 
 '<tr>' +
'<td> a </td>' +
'<td ""> +b+ </td>' +
'<td> +c+ </td>' +
'<td> +d+ </td>' +
'<td><span id="span'+posid+'">delete<span></td>' +
 '</tr>';           
htmlBuilder_Ack = htmlBuilder_Ack + '</table></li>';

新元素的附加“总是”成功，

所以这是我的问题，我想将点击处理程序附加到

下的每个范围

Table>tr>td>span, 

单击时会提醒我元素 ID，但是，当我尝试检查是否附加了单击处理程序时，没有任何元素，

点击处理程序代码:

$("#divTempItem > table > tbody > tr").('click', 'td span', function(){
   alert($(this).attr("id");
});

我也尝试过；

$("#tableTemp").on('click', 'tr td span', function(){
   alert($(this).attr("id");
});

但无济于事，似乎我无法到达我正在寻找的特定 DOM 元素...访问名称“span”+数字并不能解决我的问题，

我是不是漏掉了什么

这是输出 DOM 树的 View ；我已经删除了末尾的结束标签，我认为这就足够了......

<div id="divOrderContainer">
   <ul id="ulOrders">
      <li id="liAck"></li>
      <li id="liTemp">
          <div id="divViewOrderTitle">test</div>
          <div id="divViewOrderSpacer"></div>
          <div id="divTempItems">
            <li>
               <table id="tableTemp">
                  <tbody>
                     <tr>                         
                       <td> a </td>
                       <td> b </td>
                       <td> c </td>
                       <td> d </td>
                       <td><span id="span8">delete</span></td>
                     </tr>                         
                   </tbody>
                </table>

到底是谁自动创建了“TBODY”元素？

谢谢..

Answer 1

根据您对问题的描述，从 Ajax 部分来看，在绑定(bind)事件时，该表不存在于 DOM 中，相反，我建议绑定(bind)到 li 元素出现在 DOMReady 的 DOM 中:

$('#divTempItems li').on('click', 'td', function(e){
    alert(this.id);
});

请注意，您的 HTML 无效(粘贴在后一个代码块中)，因为 li 必须且只能出现在 ul 或 中ol 元素和 div 元素不能是 ul 或 ol 的直接子元素。此外，重复的 id 无效，id 必须在文档中是唯一的。

tbody 是由大多数(如果不是全部)浏览器在呈现表格元素时自动创建的。我记得，虽然规范说它们是可选的，但浏览器似乎并不同意。